android - 我如何在React Native中中断选择器项目的行

我的问题如下，我将一个大字符串传递给Picker项之一，因此，文本没有完全显示在屏幕上。

我尝试设置固定宽度，但是此解决方案无效。

<View style={styles.container}>
          <Image source={logo} />
          <View style={styles.bodyContainer}>
            <Text style={styles.message}>
              Para que possamos verificar se Sr. (a) está apto (a) para receber o benefício da
              previdência social, por favor, nós informe a categoria do usuário.
            </Text>
            <View style={styles.pickerContainer}>
              <Picker
                style={styles.picker}
                mode="dialog"
                selectedValue={this.state.userCategory}
                onValueChange={(itemValue, itemIndex) => {
                  if (itemValue !== '') {
                    this.setState({userCategory: itemValue});
                  }
                }}>
                <Picker.Item
                  color="#979898"
                  label="Por favor, selecione o tipo do benefício..."
                  value=""
                />

                <Picker.Item color="#979898" label={data.categories[0]} value="0" />
                <Picker.Item color="#979898" label={data.categories[1]} value="1" />
                <Picker.Item color="#979898" label={data.categories[2]} value="2" />
              </Picker>
            </View>

const styles = StyleSheet.create({
  pickerContainer: {
    width: '100%',
    height: 50,
    borderColor: '#707070',
    borderWidth: 1,
    borderRadius: 10,
    overflow: 'hidden'
  },
  picker: {
    width: '100%',
    height: 50,
    color: '#979898',
    flexDirection: 'column'
  },
});

我希望如果文本大于最大宽度，将出现换行符。

问题图片：

最佳答案

您可以使用flexDirection：“ row”设置View组件，并使用flexWrap：“ wrap”设置Text组件样式：

<View style={{ flexDirection: 'row', alignItems: "center" }}>
    <Text style={{ flexWrap: 'wrap', flex: 1}}>{item.nome}</Text>
</View>

关于android - 我如何在React Native中中断选择器项目的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57600105/