如何在React Native中为TextInput设置100％的宽度？

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

尝试从flexDirection删除inputWrapper样式。

See it here