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

【问题标题】：react native text box above scrollable-tab-view对滚动选项卡视图上方的本机文本框做出反应
【发布时间】：2016-12-12 20:16:38
【问题描述】：

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

 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 应用程序。

【问题讨论】：

标签： reactjs react-native android-scrollable-tabs

【解决方案1】：

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

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

这是来自 React Native documentation 关于 Flex 的引用：

只有在其父组件有尺寸大于 0。如果父级没有固定的宽度和高度或 flex，父级将具有 0 的尺寸和 flex 子项将不可见。

【讨论】：