React Native - 导航 DrawerItem 标签多行

Question

在补充工具栏中，我使用的是“@react-navigation/drawer”：“^5.12.5”

如何将DrawlerItems中的标签换行到下一行？

const itemStyle = {
  marginLeft: 0,
  borderBottomColor: '#D9DBE9',
  borderBottomWidth: 1,
  marginVertical: 0,
  paddingBottom: 10,
  paddingTop: 10,
  width: '100%',
};

const labelStyle = {
  fontSize: 16,
  fontWeight: '600'
}

<DrawerContentScrollView {...props} style={{ flex: 1 }}>
  <View>
    <DrawerItem
      label={'label 1'}
      labelStyle={{ ...labelStyle, backgroundColor: 'red' }}
      style={itemStyle}
    />
    <DrawerItem
      label={'long label 2'}
      labelStyle={{ ...labelStyle, backgroundColor: 'yellow' }}
      style={itemStyle}
    />
  </View>
</DrawerContentScrollView>

Answer 1

这是因为 DrawerItem 文件有 numberOfLines={1}

解决方法可以是更新 DrawerItem file from the library by removing numberOfLines 目前它有以下代码

<Text
    numberOfLines={1} // this line making the label single liner
    allowFontScaling={allowFontScaling}
    style={[
      {
        color,
        fontWeight: "500",
      },
      labelStyle,
    ]}
  >
    {label}
</Text>

另一种方法是使用类似的函数，例如

label={({focused, color}) => (
  <Text style={{color}}>Your Label</Text>
)}

React Native - 导航 DrawerItem 标签多行

React Native - Navigation DrawerItem Label Multiline

navigation-drawer

react-native

react-navigation