我目前正在学习本地反应。到目前为止，我已经完成了页面导航，但是在保存之前一次更改了很多东西之后。我几乎没有错误，但除此以外，我已全部修复。在主页上，当按下紫色按钮“ buscar”时，它将停止工作，并且无法按预期转到其他页面。
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import React from 'react';
import { useState } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, SafeAreaView, Image, Navigator, Button, StackNavi, TextInput } from "react-native";
import { TouchableOpacity } from 'react-native-gesture-handler';
function PINInsert({navigation}){
clearText = () => {
_textInput.setNativeProps({text: ''});
}
return(
<SafeAreaView style={styles.container0}>
<View style={styles0.div0}>
<View style={{
alignContent: "center",
justifyContent: "center"}}>
<Image style={styles0.flag} source={require('./assets/en.png')} />
</View>
<View style={{
alignContent: "center",
justifyContent: "center"}}>
<Image style={styles0.flag} source={require('./assets/br.png')} /></View>
</View>
<View style={styles0.div1}>
<View style={{
height: 150,
width: 150,
alignItems: "center",
justifyContent: "center"
}}>
<Image style={styles0.logo} source={require('./assets/michead.png')} />
</View>
<View>
<Text style={{fontSize: 40}}>SoundFly</Text>
</View>
</View>
<View style={styles0.div2}>
<View>
<TextInput
ref={component => _textInput = component}
style={{
height: 40,
width: 200,
margin: 5,
marginTop: 20,
borderWidth: 1,
borderColor: '#ccc',
fontSize: 20,
backgroundColor: '#fff'
}}
/>
</View>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={clearText}
style={{margin: 5, marginTop: 20, backgroundColor: 'red', padding: 5}}
>
<Text style={{justifyContent: 'center', alignItems: 'center', fontSize: 20}}>Clear text</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() =>
navigation.navigate('roompreview')}
style={{margin: 5, marginTop: 20, backgroundColor: 'purple', padding: 5}}
>
<Text style={{justifyContent: 'center', alignItems: 'center', fontSize: 20}}>Buscar</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
};
function RoomPreview({navigation}){
var org = "\t\t\tOriginal";
var lang0 = "{'\n'}+'Ingles'";
var lang1 = "{'\n'}+'Portugues'";
const [canais, setCanais] = useState([
{ idioma: 'Ingles', key: 1 },
{ idioma: 'Portugues', key: 1 }
])
const Item = ({title}) =>{
<View style={{padding: 20, margin: 10}}>
<Text style={{fontSize: 25}}>{title}</Text>
</View>
}
return (
<SafeAreaView style={styles.container0}>
<View style={styles3.container0}>
<View style={{ flexDirection: 'center'}} >
<Image source={require('./assets/michead.png')}
style={{
height: 50,
width: 80,
margin: 5}}
/>
</View>
<View style={{ flexDirection: 'center'}} >
<Image source={require('./assets/icon.png')}
style={{
height: 50,
width: 80,
margin: 5}}
/>
</View>
</View>
<View style={styles3.container1}></View>
<View style={styles3.container2}>
<Text style={{fontSize: 40, fontWeight: 'bold'}}> Sala 5 </Text>
</View>
<View style={styles3.container3}>
<Text style={{fontSize: 30}}> Ao Vivo</Text>
</View>
<View style={styles3.container4}>
<Text>
ok
</Text>
</View>
</SafeAreaView>
);
}
function Room({ navigation }) {
var lang = 'Português';
var state = 'Conectado';
return (
<SafeAreaView style={styles.container0}>
<View style={styles.retangulo}>
<Text style={{ color: "#fff", fontSize: 45 }}> Congresso ABC </Text>
</View>
<View style={styles.container1}>
<Text style={{ fontSize: 40, fontWeight: "bold" }}>Sala 5</Text>
</View>
<View style={styles.container2}>
<Text style={{ fontSize: 30 }}>Ao Vivo</Text>
</View>
<View style={styles.container3}>
<Text style={{fontSize: 30}}>{lang}{"\n"}{state}</Text>
</View>
<View style={styles.container4}>
<TouchableOpacity title="Volta para Lobby"
onPress={() =>{
navigation.navigate("room preview")
}
}
>
<Image source={require('./assets/xbutton.png')}
resizeMode = 'center'
style={styles.icon} />
</TouchableOpacity>
<Image style={styles.icon} source={require('./assets/icon-for-language-6.jpg')}/>
<Image style={styles.icon} source={require('./assets/mute.png')}/>
</View>
</SafeAreaView>
);
}
const styles0 = StyleSheet.create({
div0: {
flex: 0.4,
backgroundColor: '#00FFEC',
flexDirection: "row-reverse",
alignItems: "flex-start",
},
div1: {
flex: 0.6,
backgroundColor: '#00DCCC',
alignItems: "center",
// justifyContent: "center"
},
div2: {
flex: 1,
backgroundColor: '#00BFBF',
alignItems: "center",
// justifyContent: "center"
},
flag: {
height: 50,
width: 80,
margin: 5
},
logo:{
height: 120,
width: 120,
margin: 10,
alignContent: "center",
justifyContent: "center",
alignItems: "center"
}
})
const styles3 = StyleSheet.create({
container0: {
flex: 1,
backgroundColor: '#0DEBD5',
flexDirection: 'row'
},
container1: {
flex: 2,
backgroundColor: "#0CDFCA"
},
rectangle:{},
container2: {
flex: 1,
backgroundColor: '#1FCA9F',
flexDirection: "row",
top: "30%",
alignItems: "center",
justifyContent: "center",
},
container3: {
flex: 2,
backgroundColor: '#0CAF86'
},
container4: {
flex: 4,
backgroundColor: '#00FFEC'
},
})
const styles = StyleSheet.create({
container0: {
flex: 1,
backgroundColor: "#ffffff",
justifyContent: "center",
},
container1: {
flex: 2.5,
backgroundColor: "#0DEBD5",
},
container2: {
flex: 0.5,
flexDirection: "row",
backgroundColor: "#0CDFCA",
paddingTop: 10,
justifyContent: "center",
},
container3: {
flex: 1.5,
flexDirection: "row",
backgroundColor: "#1FCA9F",
justifyContent: "center",
},
container4: {
flex: 1,
paddingTop: 15,
flexDirection: "row",
backgroundColor: "#0CAF86",
justifyContent: "center",
},
container5: {
flex: 0.8,
flexDirection: "row",
backgroundColor: "#1FCA9F",
// justifyContent: "center",
},
container6: {
flex: 0.4,
backgroundColor: "#0CAF86",
// justifyContent: "center",
},
container7: {
flex: 0.8,
backgroundColor: "#0CAF86",
// justifyContent: "center",
},
retangulo: {
height: 128,
width: 400,
position: "relative",
zIndex: 10,
top: 100,
marginHorizontal: 20,
backgroundColor: "#20E4A8",
fontSize: 20,
alignItems: "center",
flexDirection: "row",
justifyContent: "center",
borderWidth: 1,
borderColor: "#097E5A",
borderRadius: 20,
},
icon:{
resizeMode: 'contain',
width: 70,
height: 70,
margin: 5,
},
botaoPt:{
textAlign: "center",
width: 200,
height: 50,
color: '#ffffff',
marginTop: 5,
borderColor: '#ccc',
marginHorizontal: 40,
backgroundColor: "#2471A3",
shadowColor: '#133F44',
justifyContent: "center",
alignItems: "center",
fontSize: 40,
},
botaoEn:{
textAlign: "center",
width: 130,
height: 50,
color: '#ffffff',
marginTop: 5,
borderColor: '#ccc',
marginHorizontal: 40,
backgroundColor: "#2471A3",
shadowColor: '#133F44',
justifyContent: "center",
alignItems: "center",
fontSize: 40,
}
});
export default function App() {
const Stack = createStackNavigator();
// clearText = () => {
// _textInput.setNativeProps({text: ''});
// }
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="room list"
component = {PINInsert}
/>
<Stack.Screen
name="roompreview"
component = {RoomPreview}
/>
<Stack.Screen
name="room"
options={{title: 'Welcome'}}
component = {Room}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
我需要知道造成这种情况的原因。