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中不工作

回答

相關問題