All of the code I wrote before, it was all fake, all fake, just to demonstrate the technology.

Now for a less fake, more practical application that displays a reading list, clicking on an item in the list switches to a new page that displays the details of that item.

The fields for the project are as follows: number, title, author, date, abstract

The views are the list page and the details page respectively. List shows the title of the author, time, details of all fields are displayed. Demo data:

Var books =[{id:1, name :' HTTP ', author:'Reco', date:"2016-3-1", url: 'https://www.ituring.com.cn/book/1791', }, ... ]Copy the code

The renderings are as follows:

The code is as follows:

Var books =[{id:1, name :' HTTP ', author:'Reco', date:"2016-3-1", url: "Https://www.ituring.com.cn/book/1791"}, {id: 2, name: 'Swift little book, the author:' Reco, date: "2017-3-1", url: "Https://www.ituring.com.cn/book/2413"}, {id: 3, name: 'Git little book, the author:' Reco, date: "2018-3-1", url: "Https://www.ituring.com.cn/book/1870"}, {id: 4, name: 'Vue. Js little book, the author:' Reco, date: "2019-3-1", url: 'https://www.ituring.com.cn/book/1956', }, ] import * as React from 'react'; import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar,Button} from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Item = ({item}) => ( <View style={styles.item}> <Button style={{ fontSize: 30}} onPress={() => {item.navigation.navigate('Details', { post: "postText",item }); }} title=" #841584"/> <Text style={styles.title}>{item.name}</Text> <Text style={styles.author}>{item.author}</Text> </View> ); function HomeScreen({navigation,route}) { const renderItem = ({ item }) => { item.navigation = navigation return ( <Item  item={item}/> )}; return ( <SafeAreaView style={styles.container}> <FlatList data={books} renderItem={renderItem} keyExtractor={item => item.id} /> </SafeAreaView> ); } const Stack = createStackNavigator(); function DetailsScreen({ navigation,route }) { const { item } = route.params; return ( <View> <View style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gridGap:"20px"}}> <Text style={styles.bold}>Book name</Text> <Text>{item.name}</Text> <Text style={styles.bold}>Author</Text> <Text>{item.author}</Text> <Text style={styles.bold}>Publish date</Text> <Text >{item.date}</Text> <Text style={styles.bold}>Identity</Text> <Text>{item.id}</Text> </View> <Button title="Done" onPress={() => { navigation.navigate('Home',{}); }} /> </View> ); } function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { flex: 1, flexDirection: 'row', backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, padding:10, }, author: { fontSize: 24, padding:10, }, button: { backgroundColor: "blue", padding: 20, borderRadius: 5, }, buttonText: { fontSize: 20, color: '#fff', }, bold:{ fontWeight:'bold', } }); export default App;Copy the code

conclusion

Integrates FlatList and Stack Navigation cases, combined together as a list of reality books and detailed applications.