在可滚动选项卡视图上方反应本机文本框

Question

React Native 新手，尝试将文本框放在可滚动选项卡视图上方

 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 documentation 关于 Flex 的话：

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

在可滚动选项卡视图上方反应本机文本框

react native text box above scrollable-tab-view

android-scrollable-tabs

reactjs

react-native