android - TextInput flexDirection :row not working in React-Native

Question

我目前正在为一个 Android 项目使用 React-Native。我一直在尝试制作一个 TextInput 字段，该字段旁边有一个图标。但是，出于某些原因，我注意到如果 TextInput 是其子组件之一，则 flexDirection: 'row' 不起作用。我应用样式的整个 View 将自动消失。这是我的代码的一个 fragment :

<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <View style={{flexDirection: 'row'}}>
        <Image
            style={{height: 30, width: 30}}
            source={require('./images/email-white.png')}
        />
        <TextInput 
            style={{height: 40}}
            underlineColorAndroid={'transparent'}
            placeholder={'E-mail'}
            placeholderTextColor={'white'}
            onChangeText={(data) => this.setState({ username: data })} />
    </View>
</View>

我还尝试将这两个组件包装在每个单独的 View 中，但问题仍然存在。有没有人知道如何解决这个问题？或者任何人都可以确认这是一个错误？

Answer 1

您的代码稍作修改后对我来说效果很好。我所做的唯一一件事就是为 TextInput 添加宽度，导致图标位于文本输入旁边。

工作代码:

<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <View style={{flexDirection: 'row'}}>
        <Image
            style={{height: 30, width: 30}}
            source={require('./images/email-white.png')}
        />
        <TextInput 
            style={{height: 40, width: 300}}
            underlineColorAndroid={'transparent'}
            placeholder={'E-mail'}
            placeholderTextColor={'white'}
            onChangeText={(data) => this.setState({ username: data })} />
    </View>
</View>