2017-09-25 2 views
0

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> 

내가이를 따르면, 사라진 목록이 보입니다. 어떻게 해결할 수 있습니까?

+0

원하는 모양의 빠른 스케치를 추가 할 수 있습니까? 또는 다른 응용 프로그램의 예 –

+0

@RyanTurnbull 화면 하단에 textInput 및 Button (footer)이 고정되어 있습니다. https://i.stack.imgur.com/MnheG.png (이와 같이) –

답변

0

시도가 justifyContent : 'space-between'을 추가하고 문제가 해결되지 않는 경우 <View style={{ flex: 1 }}>

<ScrollView>을 래핑하는 문제

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

시도를 해결해야 flexDirection: 'column'을 추가, 너무 고정 된 높이를 설정하려고 당신의 바닥 글 : <View style={{ height: 90 }}>

관련 문제