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>
     ;
  },  
});

Scrollable标签视图没有显示上面的代码，我无法理解为什么，请指教。我正在尝试制作像Linkedin app这样的东西。

Answer 1

<ScrollableTabView>的格式为flex: 1，因此您需要将flex: 1显式设置为其父级，以便显示它：

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

以下是React Native documentation关于Flex的引用：

组件只能扩展以填充其父级具有的可用空间维度大于0.如果父级没有固定的宽度和高度或flex，父级的尺寸为0和弹性儿童将不可见。

在scrolllable-tab-view上面反应原生文本框

1 个答案: