ScrollView 在 react-native 中呈现没有数据的更新组件？

Question

我在 react-native 应用程序中将我的页面放在 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 }} 并修复它。

In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

ScrollView 在 react-native 中呈现没有数据的更新组件？

ScrollView rendering updated components without data in react-native?

reactjs

react-native

flux

react-native-ios