react-native - 使用 react-native 在 UI 中将标题与按钮、文本和右侧组件对齐的最佳做法是什么

Question

我需要在我的标题部分对齐后退按钮和文本和右元素。

我正在使用 react-native-elements 组件进行对齐，但我提供的样式不适用于所有文本。如果文本很小，则无法按预期工作。此外，如果我尝试文本 LIST 的行距，则其中不会显示空格。参考expo的示例代码（这里我没有添加行距）并参考附件。

https://snack.expo.io/@niph/grounded-watermelon

我的问题是实现这一目标的最佳实践是什么。我已将 marginLeft 值添加为负数。

Answer 1

您已将您的放在标题title name下方。left button这消除了使用centerComponent. 而且你必须使用来改变页眉outerContainerStyles的高度。然后，使用 flex 值调整区域并使用仅重新定位文本。alignSelf

用法 如果你想体验一下，看看我的例子。

export default class App extends React.Component {
  render() {
    return (   <Header
        outerContainerStyles={{paddingTop: 0, height:130}}
        backgroundColor='green'
        leftComponent = {
          <View style={{flexDirection:"row",flex:1,marginTop:20}}>
          <TouchableOpacity activeOpacity = { .5 }>
            <Entypo name = {'chevron-thin-left'} size ={30} style = {{ color:'white'}}></Entypo>
        </TouchableOpacity>
        <Text style={{fontSize:30, color:'white',alignSelf:"flex-end"}}>NAMES</Text>
        </View>
         }
        // centerComponent = {<Text style={{fontSize:30, color:'white', flexDirection:'row'}}>NAMES</Text>}
        rightComponent = {<TouchableOpacity activeOpacity = { .5 } style={{flex:1,marginTop:20}}>
            <Text style={{ fontSize:14, color:'white',textDecorationLine:'underline'}}>LIST</Text>
          </TouchableOpacity>}
          />
    );
  }
}

启用屏幕