如何將 Text 和 TextInput 放在一行中？

Question

在我的 React Native 0.66 應用程序組件中，Text 和 TextInput 需要在一行中並占據屏幕寬度的一半。 這是使用的視圖代碼：

               <View style={{flex:1, flexDirection:'row', marginVertical: hp("1%")}}>
                        <View style={{flex:1, flexDirection:"row", width:wp("50%"), textAlign:"left"}}>
                            <Text style={styles.textTitle}>姓名:</Text>. //<<==Text
                            <TextInput   style={styles.textTitle} //<<==TextInput
                                        placeholder="姓名"
                                        onChangeText={changeName}
                                        defaultValue={name}
                                        multiline={false}
                                        />
                        </View>
                        <View style={{flex:1, flexDirection:"row", width:wp("50%"),textAlign:"left"}}>. //<<==here is row
                            <Text style={styles.textTitle}>別號:</Text>
                            <TextInput style={styles.textTitle}
                                        placeholder="別號"
                                        onChangeText={changeAlias}
                                        defaultValue={alias}
                                        multiline={false}
                                        /> 
                        </View>
                </View>

const styles = StyleSheet.create({
textTitle: {
        height:hp("10%"),
        fontSize:14,
    },

    container: {
        paddingTop:0,
    //justifyContent: 'center',     
    },
})

上面的視圖代碼的問題是TextInput遠低於Text即使它們都在同一row中具有相同的height 。 這里缺少什么以及如何在一行中對齊Text和TextInput ？

Answer 1

<View style={styles.row}>
  <Text style={styles.textTitle}>別號:</Text>
  <TextInput style={styles.textTitle}
    placeholder="別號"
    onChangeText={changeAlias}
    defaultValue={alias}
    multiline={false}
  /> 
</View>

const style = stylesheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
    width: "wp('50%')",
    textAlign: "left",
    display: flex,
    justifyContent: "space-between",
    alignItems: "center"
  }
  textTitle: {...},
  container: {...}
})

我認為您錯過了添加display: flex; 查看內容。 我替換了樣式 class行。 這對你有用。 謝謝。

Answer 2

您必須將 display:flex 添加到您的視圖組件。

Answer 3

你也可以使用這個

    <SafeAreaView style={{flex:1}}>
       <View style={{flexDirection:"row",flex:1,justifyContent:"center"}}>
           <Text style={{flex:1,textAlign:"center",backgroundColor:"blue",color:"white",height:40,paddingTop:10}}>Name</Text>
           <TextInput
               style={{backgroundColor:"red",flex:1,height:40}}
               placeholder={"hello"}
           />
       </View>
    </SafeAreaView>

我希望它能解決您的查詢。

Answer 4

您可以使用以下迷你代碼作為參考。

https://codesandbox.io/embed/hungry-meninsky-wv08l?fontsize=14&hidenavigation=1&theme=dark