【发布时间】：2019-02-28 22:00:46
【问题描述】：
我基本上复制了有效的成分部分，并试图用标签部分复制它。我在网上收到错误提示
<View style={styles.section}>
这是标签部分的打开视图容器。一切都与成分部分相同，所以在我看来它应该可以工作。 有 *** 在线标记错误只是为了更容易找到它。这些星星实际上不在我的代码中。
render() {
return (
<View style={{ flex: 1 }}>
<View>
<ActionNavbar title="Add Recipe"
leftAction={this.cancelRecipe}
leftIcon={require("app/assets/icons/cancel.png")}
rightAction={this.saveRecipe}
rightIcon={require("app/assets/icons/check.png")} />
</View>
<ScrollView style={{ flex: 1, maxHeight: this.state.height }} contentContainerStyle={{ paddingBottom: 1000}}>
<View>
<AddImage />
<Input label="Name of Recipe"
value={this.state.name}
onChangeText={name => this.setState({name})}
style={styles.nameInput}/>
<View style={{ width: "100%", flexDirection: "row", justifyContent: "space-evenly", marginTop: 30}}>
<View style={{ alignItems: "center"}}>
<Text style={styles.title}>TOTAL COOK TIME</Text>
<TouchableOpacity onPress={() => {
this.props.navigation.navigate("DurationPicker", {
hours: this.state.hours,
minutes: this.state.minutes,
});
}}>
<View style={styles.secondaryButton}>
<Text style={styles.textStyle}>{this.state.durationLabel}</Text>
</View>
</TouchableOpacity>
</View>
<View style={{ alignItems: "center"}}>
<Text style={styles.title}>Total Servings</Text>
<TouchableOpacity onPress={() => {
this.props.navigation.navigate("ServingsPicker", {
servings: this.state.servings,
});
}}>
<View style={styles.secondaryButton}>
<Text style={styles.textStyle}>{this.state.servingsLabel}</Text>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.section}>
<Text style={styles.sectionHeader}>Ingredients</Text>
<Divider style={styles.sectionDivider} />
{
this.state.ingredients.map((ingredient, index) => (
<View style={{ marginBottom: 3, flexDirection: 'row', alignItems: 'center'}} key={'ingredient-' + index}>
<View style={styles.ingredientSize}>
<Text style={{ padding: 10}}>{ingredient.number} {fractionMap[ingredient.fraction]} {ingredient.unitLabel}</Text>
</View>
<Text style={{ fontSize: 18 }}>{ingredient.name}</Text>
<Divider></Divider>
</View>
))
}
<ActionButton icon={require("app/assets/icons/whiteAdd.png")}
text="Add Ingredient"
onPress={() => {
this.props.navigation.navigate("AddIngredients", {
ingredients: this.state.ingredients,
units: this.props.units,
});
}} />
</View>
{
this.state.steps.map((step, index) => (
<View style={styles.section} key={step-${index}}>
<Text style={styles.sectionHeader}>Step {index + 1}</Text>
<Divider style={styles.sectionDivider}/>
<Text>{step}</Text>
</View>
))
}
<View style={styles.section}>
<Text style={styles.sectionHeader}>Step {this.state.steps.length + 1}</Text>
<Divider style={styles.sectionDivider} />
<ActionButton icon={require("app/assets/icons/whiteAdd.png")}
text="Add Step"
onPress={() => {
this.props.navigation.navigate("AddStep", {
ingredients: this.state.ingredients
});
}} />
</View>
<View style={styles.section}>
<Text style={styles.sectionHeader}>Notes</Text>
<Divider style={styles.sectionDivider} />
{
this.state.notes === '' ?
<ActionButton icon={require("app/assets/icons/whiteAdd.png")}
text="Add Note"
onPress={() => {
this.props.navigation.navigate("AddNote", {
note: this.state.note
});
}} /> :
<Text>{this.state.notes}</Text>
}
</View>
***<View style={styles.section}>***
<Text style={styles.sectionHeader}>Tags</Text>
<Divider style={styles.sectionDivider} />
{
this.state.tag.map((tag, index) => (
<View style={{ marginBottom: 3, flexDirection: 'row', alignItems: 'center'}} key={'tag-' + index}>
<Text style={{ fontSize: 18 }}>{ tag }</Text>
<Divider></Divider>
</View>
))
}
<ActionButton icon={require("app/assets/icons/whiteAdd.png")}
text="Add Tag"
onPress={() => {
this.props.navigation.navigate("AddTag", {
tag: this.state.tag
});
}} /> :
<Text>{this.state.tag}</Text>
}
</View>
<View style={{ flexDirection: "row", margin: 10, justifyContent: "center", alignItems: "center" }}>
<Text style={{ flex: 1, fontSize: 16 }}>
Private Recipe?
</Text>
<Switch
value={this.state.isPrivate}
onValueChange={priv => this.setState({ isPrivate : priv })}
/>
</View>
</View>
</ScrollView>
</View>);
}
}
【问题讨论】：
标签： react-native