[英]I want my text to flow to my next line but flex is not letting me do it?
我希望我的應用程序在目標部分下方添加文本,但即使我在本機 PS 中創建新組件,flex 也不允許我這樣做仍然是初學者
import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Text } from "react-native";
export default function App() {
return (
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
</View>
<View>
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
}
});
您需要將列表帶到 Container View 之外,因為 Container 的 flex-direction 是 row,所有項目都將排成一行,包括 form。
我修改后的代碼如下
<View style={styles.wrapper}>
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
/>
</View>
<View>
<Button title="ADD" onPress={this.addGoalHandler} />
</View>
</View>
<View>
{this.state.couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
},
});
我認為您使用了很多Vieuw
元素。 例如,您應該在需要打印文本的地方使用Text
。
但我想我擁有它。 您將所有內容包裝到一個具有以下樣式的View
中;
flexDirection: "row",
如果您不想將整個View
放在一條線上,那就不好了......問題解決了嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.