React-native <Text>未包装在内部flex中

Question

首先是一些伪代码：

render(){
    return(
        <View style={{flexDirection:'row', flexWrap:'wrap'}}>
            <View style={{flexDirection:'column', flexWrap:'wrap'}}>
                <View style={{flexDirection:'row', flexWrap:'wrap', flexShrink:1}}>
                    <Text>azeaeazeazeazeazeazeazearzetareutaeriauzertaiueyrtaieuyrtaieyrtaieuyrtaieuyrtaieuzyrt</Text>
                </View>
            </View>
            <View style={{borderWidth:1}}/>
            <View style={{flexDirection:'column', flexWrap:'wrap'}}>
                <Text>azeaeazeazeazeazeazeazearzetareutaeriauzertaiueyrtaieuyrtaieyrtaieuyrtaieuyrtaieuzyrt</Text>
            </View>
        </View>
    )
}

我想要的是分割屏幕并使文本两面都包裹起来。

会发生什么情况，第一行文本写在一行上（因此它离开了屏幕），右边是“ borderWidth：1”，下一行是第二行文本，溢出

最终目标是一个标志表单，只要我不将其放置在“ flexDirection：row”视图中，该表单就可以正确显示，这是我需要的，因为我希望两种形式都可以并排（上下响应）如果在移动设备上）

有任何提示吗？

通过这种方式设置正确显示的表单：

render(){
    return(

            <View style={{justifyContent: "flex-start", alignItems: "stretch", minWidth:wp(10)}}>
                <View style={{flexWrap:'wrap', flexShrink:1}}>
                    <Text style={{textAlign:'center'}}>Create your WaitForMe account.</Text>
                    <Text style={{textAlign:'center'}}>It’s free and only takes a minute.</Text>
                    <Text style={{fontWeight:'bold', margin: 2}}>Email</Text>
                    <TextInput style={{borderWidth: 1, margin: 2}} placeholder="E-mail address" onChangeText={(mail) => this.setState({mail})} onBlur={()=>this.validateSignUpForm()}/>
                    <Text style={{color:'red', margin: 2}}>{this.state.errors.mail}</Text>
                    <Text style={{fontWeight:'bold', margin: 2}}>Password</Text>
                    <TextInput style={{borderWidth: 1, margin: 2}} placeholder="Password" onChangeText={(password) => this.setState({password})} onBlur={()=>this.validateSignUpForm()}/>
                    <Text style={{color:'red', margin: 2}}>{this.state.errors.password}</Text>
                    <Text style={{margin:2, flexShrink:1}}>Passwords must be at least 8 characters long and contain at least 1 letter, 1 number and a special character</Text>
                    <Text style={{fontWeight:'bold', margin: 2}}>Confirm password</Text>
                    <TextInput style={{borderWidth: 1, margin: 2}} placeholder="Confirm password" onChangeText={(confirm) => this.setState({confirm})} onBlur={()=>this.validateSignUpForm()}/>
                    <Text style={{color:'red', margin: 2}}>{this.state.errors.confirm}</Text>
                </View>
                <Button title="Sign up" onPress={()=>this.signUp()} disabled={this.state.signUpDisabled}/>
            </View>
    )
}

正确的行为： 大萤幕： 小屏幕：

不良行为（当放置在flexDirection中时：“行”

小屏幕裁剪：

Answer 1

您应该在父组件中指定display: 'flex'。这是将其子项视为弹性项的唯一方法。

您的“好”例子只是巧合。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#The_flex_container

这是一些伪代码，所以您知道ht

<View style={{ display: 'flex', flexDirection: 'column' }}>
    <View style={{ display: 'flex', flex: 5 }}>                   
        <Text style={{ flex: 1, flexWrap:'wrap', flexShrink:1 }}></Text>
        <Text style={{ flex: 1, flexWrap:'wrap', flexShrink:1 }}></Text>
        <Text style={{ flex: 1 }}></Text>
        <TextInput style={{ flex: 3 }}/>
        <Text style={{ flex: 1, flexWrap:'wrap', flexShrink:1 }}></Text>
    </View>
    <Button style={{ flex: 1 }} />
</View>