Question

我的问题如下，我将一个大字符串传递给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'
  },
});

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

问题的图像：

Answer 1

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

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

Answer 2

提供固定宽度将自动截断您的文本。尝试将其设置为flex：1，文本也带有numberOfLines的道具，请尝试使用它。

此外，如果可以在文本中添加填充以使其在视图中对齐。

Dont give it fixed width or fixed height。

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

2 个答案: