[英]Paasing data from a child class component to a parent functional component in react
[英]Passing data from a functional component to a parent class component react native
所以我在我的應用程序中有一個標簽導航,我試圖從名為 ScanScreen 的標簽屏幕上掃描一個 UPC 號碼,並將其發送到我有一個搜索欄的主屏幕,我希望在那里顯示 upc 號碼一旦導航完成。 到目前為止,我能夠掃描 upc 號碼並導航到主屏幕,但由於某種原因,我無法發送 upc 號碼。 我嘗試了很多方法,例如。 navigation.navigate('HomeScreen',{upc: data}) 和主屏幕上的 getParam() 但沒有任何效果。
Obj = 掃描 upc 然后成功導航到主屏幕選項卡並在搜索欄上顯示數字
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = { search: '', isLoading: true };
this.products = [];
}
componentDidMount() {
db.collection("products")
.get()
.then(querySnapshot => {
const data = querySnapshot.docs.map(doc => doc.data());
this.setState({
products: data,
isLoading: false,
dataSource: data
},
function () {
this.products = data;
}
);
}).catch(error => {
console.error(error);
});
}
GetFlag(ingredients, status) {
var Ingredients = Object.values(ingredients);
for (var i = 0; i < Ingredients.length; i++) {
if (Ingredients[i].Status == status)
return true;
}
}
search = text => {
console.log(text);
};
clear = () => {
this.search.clear();
};
SearchFilterFunction(text) {
const newData = this.products.filter(function (item) {
const itemData = item.Name ? item.Name.toUpperCase() :
''.toUpperCase();
const upcData = item.UPC;
const textData = text.toUpperCase();
if (itemData.indexOf(textData) > -1)
return true;
else if (upcData.toString().indexOf(textData) > -1)
return true;
else
return false;
});
this.setState({
dataSource: newData, search: text,
});
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: 0.4,
width: '100%',
backgroundColor: '#141313',
}}
/>
);
};
render() {
const { navigate } = this.props.navigation;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 21 }}>
<ActivityIndicator />
</View>
);
}
const upc = navigate.getParams('upcCode')
console.log(upc)
return (
<View style={styles.viewStyle}>
<SearchBar round
searchIcon={{ size: 25 }}
onChangeText={text => this.SearchFilterFunction(text)} onClear={text => this.SearchFilterFunction('')}
placeholder="Type Here to Search..." value={this.state.search}
/>
{
this.state.search.trim() != "" ?
<FlatList data={this.state.dataSource}
ItemSeparatorComponent={this.ListViewItemSeparator}
renderItem={({ item }) => (
<View style={styles.container}>
<TouchableHighlight onPress={() => this.props.navigation.navigate('Summary', {
ProductObject: item
})}
>
<View >
{
this.GetFlag(item.ingredients, 'Haram') == true ?
<Image source={images['Haram']} style={styles.imageView} /> :
this.GetFlag(item.ingredients, 'Halal') == true ?
<Image source={images['Halal']} style={styles.imageView} /> :
this.GetFlag(item.ingredients,'Doubtful') == true ?
<Image source={images['Doubtful']} style={styles.imageView} /> :
null
}
<Text style={styles.baseText}>
<Text style={styles.titleText} >
{item.Name}{'\n'}{'\n'}
</Text>
</Text>
</View>
</TouchableHighlight>
</View>
)}
enableEmptySections={true}
style={{ marginTop: 11 }}
keyExtractor={(item, index) => index.toString()}
/> : <FlatList></FlatList>
}
</View>
);
}
}
export default function ScanScreen({navigation}) {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
navigation.navigate("Home",{
upcCode: data
})
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
}}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
{scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
</View>
);
}
下面是我的 AppNavigator.JS 代碼,如果它有助於查看導航
function MainTabNavigator() {
return (
<Tab.Navigator tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'gray'
}}
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;
let tabBarVisible = true;
if (route.name == 'Home') {
iconName = 'md-home'
} else if (route.name == 'Scan') {
iconName = 'md-camera'
} else if (route.name == 'Menu') {
iconName = "md-menu"
}
else if (route.name == 'Login') {
iconName = "md-log-in"
}
return <Ionicons name={iconName} color={color} size={size} />
}
})}
>
<Tab.Screen
name='Home'
component={HomeScreen}
options={({route}) => ({
title: "Search for Products",
headerBackTitleVisible: false,
headerStyle: {
backgroundColor: '#1c2845',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontSize:22,
fontFamily: 'DamascusLight'
}
})}
/>
<Tab.Screen
name='Login'
component={LoginScreen}
/>
<Tab.Screen name='Scan' component={ScanScreen} />
<Tab.Screen name='Menu' component={SearchScreen} />
</Tab.Navigator>
)
}
function MainStackNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
{/* <Stack.Screen name='Login' component={LoginScreen} /> */}
<Stack.Screen name='HomeScreen' component={MainTabNavigator}
options={({ route }) => ({
title: 'Search for Products',
headerBackTitleVisible: false,
headerStyle: {
backgroundColor: '#1c2845',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontSize: 22,
fontFamily: "DamascusLight"
},
}
)} />
<Stack.Screen name='RegistrationScreen' component={RegistrationScreen} />
<Stack.Screen
name="Summary"
component={SummaryScreen}
options={({ route }) => ({
headerTitle: () =>
<View style={styles.header}>
<Text numberOfLines={1} style={styles.title}>{route.params.title}</Text>
<Text numberOfLines={1} style={styles.subtitle}>{route.params.subtitle}</Text>
</View>,
headerBackTitleVisible: false,
headerStyle: {
backgroundColor: '#1c2845',
height: 100
},
headerTintColor: '#fff',
headerTitleStyle: {
fontSize: 12,
fontFamily: "DamascusLight"
},
}
)}
/>
<Stack.Screen
name="ScanSummary"
component={ScanSummary}
// options={({route}) => ({
// headerTitle: () =>
// <View style={styles.header}>
// <Text numberOfLines={1}>{route.params.title}</Text>
// <Text numberOfLines={1}>{route.params.subtitle}</Text>
// </View>,
// headerStyle: {
// backgroundColor: '#1c2845',
// height: 100
// },
// headerTintColor: '#fff',
// headerTitleStyle: {
// fontSize: 12,
// fontFamily: "DamascusLight"
// },
// })}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default MainStackNavigator
如果您使用的是反應導航 5
您可以通過 params 訪問
this.props.route.params
如果年紀大了
this.props.navigation.state.params
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.