React Native：絶対ボトムテキスト入力

Question

私の人生では、このテキスト入力を絶対に画面の下部に表示することはできません。

これは私の非常に基本的な設定です：

class Chat extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
      <View style={styles.content}> 
      <Text>Test</Text> 
      </View> 
      <View style={styles.footer}> 
      <Text>Meow</Text> 
      </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: "#F5F5F5", 
    ...Platform.select({ 
     ios: { paddingTop: 30 } 
    }), 
    }, 
    content: { 
    flex: 1, 
    }, 
    footer: { 
    borderWidth: 1, 
    borderColor: '#ccc', 
    padding:10, 
    position: 'absolute', 
    flex:0.1, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    } 
} 

私も一定の高さにフッターのflex属性を切り替えてみた：80、私はまだ同じ出力を得ます。フッターを一番下に置くにはどうすればいいですか？

これはリアクションナビゲーションを使用していることに注意してください。これはStackNavigator画面です。重要であるかどうかはわかりません。

Answer 1

スタイリングに問題があります..あなたは1であることをコンテナのフレックスを必要とし、コンテナの内側にフレックスの二つのビューがあります：1とフレックス：0.1は、それは不可能だと思われますこの構成では、それを作るために、のは、何か他のものを試してみましょう：合計で1つまり、コンテンツビューの8部とフッタビューの2部である2：

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: "#F5F5F5", 
    ...Platform.select({ 
     ios: { paddingTop: 30 } 
    }), 
    }, 
    content: { 
    flex: 0.8, 
    }, 
    footer: { 
    borderWidth: 1, 
    borderColor: '#ccc', 
    padding:10, 
    flex:0.2, 
    } 
} 

基本的に、私は8の比率に画面を分割しました。

乾杯：