1.the view that i want is to arrange two buttons in flexDirection:'row', three buttons in flexDirection:'column',please specify where to make changes or if possible post modified link to BoxContainer.js:' https://dzone.com/articles/custom-container-component-in-react-native-with-di '.> 2. i've tried using<>
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import BoxContainer from './components/BoxContainer.js'
export default class App extends Component {
//Binding the function with class
buttonClickListener = () => {
alert("Clicked On Button !!!");
};
render() {
return (
<View style={styles.page}>
<Text style={styles.headerText}></Text>
<BoxContainer style={styles.container1}>
<View style={{flexDirection:'row'}}>
<View style={[{ width: "30", height :100, margin: 0,padding:'10', backgroundColor: "green" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View>
<View style={[{ width: "70%", height :100, margin: 0, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON2"
color="#00B0FF"
/>
</View></View></BoxContainer>
</View>
41 | <BoxContainer style={styles.container2}>
^error is here
<View style={{flexDirection:'row'}}>
<View style={[{ width: "90%", height :100, margin: 0, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button One"
color="#00B0FF"
/>
</View>
<View style={[{ width: "90%",height :80, margin: 1, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Two"
color="#EC407A"
/>
</View>
<View style={[{ width: "90%",height :60, margin: 1, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Three"
color="#1DE9B6"
/>
</View></View></BoxContainer></View>
);
}
}
const styles = StyleSheet.create({
page:{flex:1},
container1: {
flex: 1,
flexDirection: 'column',
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
container2: {
flex: 1,
flexDirection: 'row',
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
headerText: {
fontSize: 20,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
});
//error message:
ESLint: (41:5) Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
39 |
40 |
> 41 | <BoxContainer style={styles.container2}>
| ^
`i've tried <></> it dosent work `
42 | <View style={{flexDirection:'row'}}>
43 | <View style={[{ width: "90%", height :100, margin: 0, backgroundColor: "red" }]}>
44 | <Button (null)```
Put everything inside your render
function into one tag, a div for example:
render() {
return (
<div>
// your code
</div>
)
}
Or refactor your code to remove the adjacent tags:
render() {
return (
<View style={styles.page}>
<Text style={styles.headerText}></Text>
<BoxContainer style={styles.container1}>
<View style={{flexDirection:'row'}}>
<View style={[{ width: "30", height :100, margin: 0,padding:'10', backgroundColor: "green" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View>
<View style={[{ width: "70%", height :100, margin: 0, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON2"
color="#00B0FF"
/>
</View></View></BoxContainer>
<!-- </View> Remove this! -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.