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

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。默认 flexDirection 在 react native 中是 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。所以我不需要在 icon 组件的 style props 中设置 width 和 height 来获取 icon 大小。