TextInput flexDirection：行在React-Native中不工作

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

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

我也试过来包装每个单独视图中两个组成部分，但问题仍然存在。有谁知道如何解决这个问题？或者任何人都可以确认这是一个错误？

来源

2016-03-06 Kelvin Aliyanto

尝试关闭图片标签......

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

此外，添加一些尺寸到您的TextInput ...

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

您可能还需要设置flex: 0图片和flex: 1上TextInput

来源

2016-03-06 19:44:19

嗨克里斯，我试过你的解决方案，不幸的是它仍然无法正常工作。你可以在我的问题中看到我更新的代码，以查看我使用的确切代码。 FlexDirection行在您的Android副本中具有TextInput子组件时是否工作？ –

我试图在rnplay上运行一个示例，但我认为他们的服务可能有问题。 https://rnplay.org/apps/3MXIVg –

你的代码只需稍作修改即可。我做的唯一的事情就是给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>

来源

2016-03-08 14:48:57 pinewood

我有，当我从书上掌握建筑的示例代码相同的问题做出反应原住民

的代码已经包围的TextInput字段与flexDirection一个观点：“行'并且子文本输入字段不可访问。只有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' 
    } 
});

希望这提供协助你们。我花了很长时间才得到这个简单的工作。

来源

2017-05-01 02:02:16

TextInput flexDirection：行在React-Native中不工作

回答

相关问题