web-dev-qa-db-ja.com

<View />で隣同士に揃えてネイティブリアクタ

2つのアイテム（アイコン/テキスト）を並べて配置するにはどうすればよいですか？

<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
cssreactjsreact-nativeview
8
Stophface

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",
  },

});
10
agent_hunt
<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>
2
ashutosh pandey