Question

我目前正在为Android项目使用React-Native。我一直在尝试在字段旁边创建一个带有图标的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的TextInput字段：＆＃39; row＆＃39;并且无法访问子TextInput字段。只有TextInput边框可见。在浏览了这个页面上的一些建议之后，我发现了一些有效的方法。

如果容器视图有一个flexDirection：＆＃39; row＆＃39;。请确保在文本字段输入中添加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

TextInput flexDirection：行在React-Native

3 个答案: