如何在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。