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

Question

我目前正在为Android项目使用React-Native.我一直在尝试在字段旁边创建一个带有图标的TextInput字段.但是,由于某些原因,我注意到flexDirection: 'row'如果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}}
            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在图像和flex: 1TextInput 上进行设置