React Native Expo 教程(4) - 一个现实点的应用

之前写的代码，面对的场景都是假的，全部都是假的，只是为了演示技术的应用。

现在来一个不那么假的，更加实践的一个应用，可以显示读书列表，点击列表内的项目，就可以切换到新的页面，其中显示此项目的详情。

项目的字段如下：编号 ，书名 ，作者，时间，摘要

视图两个分别是列表页面和详情页面。列表内显示书名作者，时间，详情内所有字段全部显示。演示数据：

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

效果图如下：

代码如下：

var books =[ 
  {
    id:1,
    name : 'HTTP 小书',
    author:'Reco',
    date:"2016-3-1",
    url: 'https://www.ituring.com.cn/book/1791',
  },
  {
    id:2,
    name : 'Swift 小书',
    author:'Reco',
    date:"2017-3-1",
    url: 'https://www.ituring.com.cn/book/2413',
  },
  {
    id:3,
    name : 'Git 小书',
    author:'Reco',
    date:"2018-3-1",
    url: 'https://www.ituring.com.cn/book/1870',
  },
  {
    id:4,
    name : 'Vue.js 小书',
    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="详情" color="#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;

总结

整合了FlatList和Stack Navigation的案例，组合到一起作为一个现实书的列表和详情的应用。