對齊<View/>對齊

Question

如何對齊兩個項目（圖標/文字）？

<TouchableOpacity 
     key = {index} 
     onPress = {() => this._onPress(key)} 
     style = {containerStyle.container}> 
     <View> 
      <Icon 
      name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"} 
      size = {24} 
      style = {{ paddingLeft: 10, color: "#108EE9"}} /> 
      <Text 
      style = {this._createStyleText(key)}> 
      {key} 
      </Text> 
     </View> 
    </TouchableOpacity> 

const containerStyle = StyleSheet.create({ 
    container: { 
    padding: 8, 
    backgroundColor: "#ffffff", 
    }, 
}); 

const textStyle = StyleSheet.create({ 
    unselectedText: { 
     paddingLeft: 45, 
     color: "#000000", 
     fontWeight: "normal", 
    }, 

}); 

眼下的排列是這樣的：

icon 
     text 

我需要他們這樣

icon text 

Answer 1

可以在一行中使用flexDirection佈局項目。默認爲列

<TouchableOpacity 
     key = {index} 
     onPress = {() => this._onPress(key)} 
     style = {containerStyle.container}> 
     <View style={containerStyle.rowContainer}> 
      <Icon 
      name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"} 
      size = {24} 
      style = {{ paddingLeft: 10, color: "#108EE9"}} /> 
      <Text 
      style = {this._createStyleText(key)}> 
      {key} 
      </Text> 
     </View> 
    </TouchableOpacity> 

const containerStyle = StyleSheet.create({ 
    container: { 
    padding: 8, 
    backgroundColor: "#ffffff", 
    }, 
    rowContainer: { 
    flexDirection: 'row' 
    } 
}); 

const textStyle = StyleSheet.create({ 
    unselectedText: { 
     paddingLeft: 45, 
     color: "#000000", 
     fontWeight: "normal", 
    }, 

}); 

Answer 2

<View style={{flexDirection:'row'}}> 
     <Icon 
     name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"} 
     size = {24} 
     style = {{ paddingLeft: 10}} /> 
     <Text 
     style = {this._createStyleText(key)}> 
     {key} 
     </Text> 
    </View>