reactjs 在react native中将两个元素彼此相邻/并排/内联对齐< View/>

w51jfk4q  于 2022-12-18  发布在  React
关注(0)|答案(2)|浏览(144)

如何对齐相邻的两个项目(图标/文本)?

<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

nzkunb0c

nzkunb0c1#

您可以使用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",
  },

});
jdgnovmf

jdgnovmf2#

<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>

相关问题