ScrollView 在 react-native 中渲染没有数据的更新组件?
Posted
技术标签:
【中文标题】ScrollView 在 react-native 中渲染没有数据的更新组件?【英文标题】:ScrollView rendering updated components without data in react-native? 【发布时间】:2017-07-11 12:40:57 【问题描述】:我的页面位于 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>
);
【问题讨论】:
onChangeText 是如何定义的? @AlexanderGuschin,很抱歉没有发布答案,我发现我必须将style= flex:1
添加到所有子组件中。
【参考方案1】:
查看documentation 并将 style= flex:1 添加到每个子组件并修复它。
为了绑定一个ScrollView的高度,要么设置一个ScrollView的高度 直接视图(不鼓励)或确保所有父视图都有 有界高度。忘记将 flex: 1 向下传输到视图堆栈 在这里可能会导致错误,元素检查器很容易发现 调试。
【讨论】:
以上是关于ScrollView 在 react-native 中渲染没有数据的更新组件?的主要内容,如果未能解决你的问题,请参考以下文章
React-Native ScrollView 使 TextInput 消失
React-native ScrollView 上拉加载和下拉刷新