TextInput flexDirection：行在 React-Native 中不起作用

Question

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

<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>

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

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>

Answer 2

当我从 Mastering React Native 一书中构建示例代码时，我遇到了同样的问题

该代码在带有 flexDirection: 'row' 的 View 中包含了一个 TextInput 字段，并且子 TextInput 字段不可访问。 只有 TextInput 边框可见。 在尝试了此页面上的一些建议后，我发现了一些有用的东西。

如果容器视图具有 flexDirection: 'row'。 请确保将 flex: 1 添加到您的文本字段输入中。 图像 flex 似乎没有必要。 一旦我将 flex: 1 添加到 styles.input 表中，TextInput 就可以访问了。

以下代码对我有用：

<View style={globalStyles.COMMON_STYLES.pageContainer}>
    <View style={styles.search}>
        <Image
            style={{height: 30, width: 30}}
            source={require('../../images/email-white.png')}/>
        <TextInput
            style={styles.input}
            onChangeText={text => this.setState({ searchText: text})}
            value={this.state.searchText}
            placeholder={'Search'}
            placeholderTextColor={globalStyles.MUTED_COLOR}/>
    </View>
</View>

当地风格：

const styles = StyleSheet.create({
    input: {
        flex: 1,
        height: 35,
        color: globalStyles.TEXT_COLOR,
        borderColor: globalStyles.MUTED_COLOR,
        backgroundColor: globalStyles.BG_COLOR
    },
    search: {
        borderColor: globalStyles.MUTED_COLOR,

        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 5,
        borderWidth: 1,
        // marginTop: 10,
        // marginBottom: 5
    }
})

全局样式（样式/全局）

export const COMMON_STYLES = StyleSheet.create({
    pageContainer: {
        backgroundColor: BG_COLOR,
        flex: 1,
        marginTop: 0,
        paddingTop: 20,
        marginBottom: 48,
        marginHorizontal: 10,
        paddingHorizontal: 0
    },
    text: {
      color: TEXT_COLOR,
      fontFamily: 'Helvetica Neue'
    }
});

希望这对你们有帮助。 我花了很长时间才得到这么简单的工作。

Answer 3

尝试关闭您的图像标签...

<Image style={{width:30, height: 30}} source={require('./icon.png')} />

另外，为您的 TextInput 添加一些尺寸...

<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />

您可能还需要在图像上设置flex: 0并在 TextInput 上设置flex: 1