Question

我的页面位于react-native app中的 ScrollView 中。首次加载子组件时，可以说多个TextInput's渲染完全正常。

每个 TextInput 都有一个唯一键。当我开始更新任何TextInput字段时，其他组件就会崩溃。通过崩溃我的意思是组件存在但不会显示任何数据。 onPress事件适用于折叠的组件，但文本不会显示。

我找到的一种方法是在每个渲染上添加一个唯一的随机key，但是 TextInput 的焦点会丢失，这不是一个好的用户体验。

代码：

class App extends React.Component {
  constructor(props) {
   super(props);
   this.state= this.props;
  }

  buildList(data) {
    _.map(data, blog => {
      return(
      <View key={blog.id}>
        <Text>{blog.title}</Text>
        <TextInput
         placeholder={blog.label}
         onChangeText={text => onChangeText(text)}
         value={value}
        />
      </View>
     );
    }
  }

  render() {
    const {
          data
        } = this.state;
    return (
      <View style={mainStyles.pageWrap}>
        <ScrollView style={mainStyles.contentWrap}>
          <View>
            {
              this.buildList(
                data
              )
            }
          </View>
        </ScrollView>
      </View>
    );
  }
}

Answer 1

浏览documentation并将 style = {{flex：1}} 添加到每个子组件并修复它。

要绑定ScrollView的高度，请设置高度视图直接（气馁）或确保所有父视图都有有限的高度。忘记在视图堆栈中传输{flex：1} 这可能导致错误，元素检查员很容易调试。

ScrollView渲染更新的组件而没有react-native中的数据？

1 个答案: