How to put Text and TextInput in one line?-CodePudding

In my React Native 0.66 app component, a Text and TextInput needs to be in one line and occupied half of the screen width. Here is the view code used:

               <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',     
    },
})

The problem with the view code above is that the TextInput was far below the Text even though both of them are in one row with the same height. What is missing here and how to align Text and TextInput in one line?

CodePudding user response：

<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: {...}
})

I think you missed adding display: flex; to the View Content. I replaced the style class row. This will work for you. thanks.

CodePudding user response：

You have to add display:flex to your View component.

CodePudding user response：

You can also use this

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

I hope it solve your Query.

CodePudding user response：

You can use the following mini-code for reference.

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