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

Question

I want to align this options icon inside the TouchableHighlight in IOS application in react-native but when I implement it is not using textAlignVerticle property as it is android only property. How I can get the alternative which works both in android and 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

A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection . The default flexDirection is column in react native.

In flexDirection: 'row';

You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.

Try with below code:

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

I don't know what icon component are you using. I'm using react-native-vector-icons . So I don't need to set width and height in style props of icon component for icon size.