什么是替代纺织品在反应-本地？

小开

是的，它叫做 TextInput，普通的 TextInput 组件支持多行。

只需将以下属性分配给 TextInput 组件即可

multiline = {true}
numberOfLines = {4}

最后，你应该拥有这样的东西:

<TextInput
multiline={true}
numberOfLines={4}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>

来源 https://facebook.github.io/react-native/docs/textinput

小开

我正在使用这个组件: Https://www.npmjs.com/package/react-native-autogrow-textinput

它在文本上自动扩展。我创建了自己的可重用组件，其中包含 autogrowth-text 输入，组件内部如下所示:

<AutoGrowingTextInput
minHeight={40}
maxHeight={maxHeight} // this is a flexible value that I set in my
component, where I use this reusable component, same below, unless specified the other
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor='#C7C7CD'
style={inputStyle}
value={value}
/>

小开

如果只使用反应本机组件，则选择 TextInput

正如“ funkysoul”所解释的:

只需将以下属性分配给 TextInput 组件即可

multiline = {true}
numberOfLines = {4}

如果希望将此组件看作经典的 textarea(比内联文本输入大) ，通常需要添加 height style-property。请看下面的例子:

 <TextInput
multiline={true}
numberOfLines={10}
style=\{\{ height:200, backgroundColor:'red'}}
/>

为了更好地理解 height角色，我添加了 backoundColor。请不要在您的项目中使用它;)

小开

我通过以下方式将一个 TextInput组件包装到一个 View中，以反应原生的方式构建文本区域:

  <View style={styles.textAreaContainer} >
<TextInput
style={styles.textArea}
underlineColorAndroid="transparent"
placeholder="Type something"
placeholderTextColor="grey"
numberOfLines={10}
multiline={true}
/>
</View>

...

const styles = StyleSheet.create({
textAreaContainer: {
borderColor: COLORS.grey20,
borderWidth: 1,
padding: 5
},
textArea: {
height: 150,
justifyContent: "flex-start"
}
})

小开

如果您想看到像文本区一样的 TextInput组件，您需要添加这个

<TextInput
multiline={true}
numberOfLines={10}
style=\{\{ height:200, textAlignVertical: 'top',}}/>