reactjs - 对滚动选项卡视图上方的本机文本框做出反应

Question

新反应原生，试图将文本框放在可滚动选项卡视图上方

 export default React.createClass({
  render() {
    return 
    <View>
    <TextInput
          style={{height: 50}}
          placeholder="Enter!"
          onChangeText={(searchText) => this.setState({searchText})}/>
    <ScrollableTabView
      style={{marginTop: 10, }}
      initialPage={1}
      renderTabBar={() => <FacebookTabBar />} 
      >   
      <ScrollView tabLabel="ios-search" style={styles.tabView}>
        <View style={styles.card}>
           <TextInput
          style={{height: 50}}
          placeholder="Enter!"
          onChangeText={(searchText) => this.setState({searchText})}/>
        </View>
      </ScrollView>
    </ScrollableTabView>
    </View>
     ;
  },  
});

上面的代码没有显示可滚动的标签视图，我无法理解为什么，请指教。我正在尝试制作类似 Linkedin 应用程序的东西。

Answer 1

<ScrollableTabView>样式为flex: 1，因此您需要flex: 1像这样显式设置其父级才能显示它：

return (
  <View style={{flex: 1}}>
    ...
  </View>
);

这是 React Native文档中关于 Flex 的引用：

只有当父组件的尺寸大于 0 时，组件才能扩展以填充可用空间。如果父组件没有固定的宽度和高度或 flex，则父组件的尺寸将为 0，而 flex 子组件将不可见。