如何在IOS设备中垂直对齐图标？

Question

我想在 react-native 的 IOS 应用程序的TouchableHighlight内对齐此选项图标，但是当我实现它时，未使用 textAlignVerticle 属性，因为它是android唯一的属性。如何获得在Android和IOS上均可使用的替代方案？

<TouchableHighlight  
                style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
                onPress={()=>this.props.navigation.navigate('SearchSetting')}
            >
  <Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight>

Answer 1

react native的一个组件正在使用flexbox算法（与CSS Flexbox完全相同）。因此，您可以使用父组件中的justifyContent和alignItems将任何子组件垂直或水平对齐。 justifyContent和alignItems都取决于flexDirection。 react native的默认flexDirection是column。

在flexDirection: 'row';

您可以将父组件中的justifyContent的子组件垂直对齐，alignItems的子组件水平对齐。

尝试以下代码：

<TouchableHighlight  
  style={[
    { 
      position: 'absolute', 
      bottom: 20, 
      zIndex:999999, 
      right: 155, 
      borderRadius: 25,
      backgroundColor: '#0000ff'
     }
  ]}>

  <View 
    style={{
      flex: 1,
      width: 100,
      height: 100,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
    <Ionicons name="ios-home" size={20} color={'#FFF'} />
  </View>
</TouchableHighlight>

我不知道您使用的是哪个图标组件。我正在使用react-native-vector-icons。因此，我不需要在图标组件的样式道具中为图标大小设置width和height。