React本機flexBox頁腳不起作用

我在堆棧溢出搜索如何使用React Native設置頁腳。我找到了解決React本機flexBox頁腳不起作用

https://stackoverflow.com/a/31249011/8226957

我也跟着把style={{flex: 1}}到根視圖，但它不工作。

<View style={{flex: 1}}> 
    <ScrollView> 
     <FlatList 
      data={this.state.datas} 
      renderItem={({item}) => 
       <TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}> 
        <Text style={styles.item}> 
         {item.value} 
        </Text> 
       </TouchableOpacity> 
      } 
     /> 
    </ScrollView> 
    <View> 
     <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text) => this.setState({text})} 
      value={this.state.text} 
     /> 
     <TouchableOpacity onPress={this._onAddButton}> 
      <View style={{ 
       height: 50, 
       backgroundColor: 'steelblue', 
       alignItems: 'center', 
       justifyContent: 'center', 
      }}> 
       <Text style={{textAlign: 'auto'}}>ADD</Text> 
      </View> 
     </TouchableOpacity> 
    </View> 
</View>

當我按照那個，我看到消失列表。我該如何解決這個問題？

來源

2017-09-25 이혜란

你可以添加一個你想要的樣子嗎？或從另一個應用程序的示例 –

@RyanTurnbull我希望textInput和Button（頁腳）固定在屏幕的底部。 https://i.stack.imgur.com/MnheG.png（像這樣） –

嘗試添加justifyContent : 'space-between'並添加flexDirection: 'column'應該解決您的問題

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>

來源

2017-09-25 16:41:40

嘗試包裹<ScrollView>在<View style={{ flex: 1 }}>

如果還是不行，請嘗試設置一個固定的高度太貴頁腳：<View style={{ height: 90 }}>

來源

2017-09-25 21:06:43 Appfred

React本機flexBox頁腳不起作用

回答

相關問題