如何在React Native中將100％寬度設置爲TextInput？

Question

我正在使用React Native製作簡單的待辦事宜應用程序，只是在觀看YouTube。差異視頻和我是我的版本是最新的RN，並在Android模擬應用程序。

的代碼看起來一樣，但我TextInput寬度不是100％，但非常小的元素，你可以看到

我的代碼如下，如何解決呢？

import React, {Component} from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
} from 'react-native'; 

export default class Main extends Component { 
    render() { 
     return (
      <View style={styles.wrapper}> 
       <View style={styles.topBar}> 
        <Text style={styles.title}> 
         To-Do List 
        </Text> 
       </View> 
       <View style={styles.inputWrapper}> 
        <TextInput 
         style={styles.input}/> 
       </View> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    wrapper: { 
     flex: 1, 
     justifyContent: 'flex-start', 
     alignItems: 'stretch' 
    }, 
    topBar: { 
     padding: 16, 
     flexDirection: 'row', 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#2ecc71' 
    }, 
    title: { 
     color: 'white', 
     fontSize: 20 
    }, 
    inputWrapper: { 
     padding: 10, 
     flexDirection: 'row', 
     alignItems: 'stretch', 
     backgroundColor: 'green', 
     borderColor: 'red' 
    }, 
    input: { 
     height: 26, 
     borderRadius: 8, 
     backgroundColor: 'white' 
    } 


}); 

Answer 1

嘗試從inputWrapper取出flexDirection風格。

See it here。