Блог

Здесь Home.js показывает оба названия экрана И здесь Student.js на экране отображаются только контактные номера студентов и Teacher.js

Это мой полный код.. И я использовал навигационную версию 4

Navigation.js

 import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import Home from '../screens/Home'
import Teacher from '../screens/Teacher'
import Student from '../screens/Student'

const StackNavigator = createStackNavigator(
  {
    Student: {
      screen: Student
    },
    Home: {
      screen: Home
    },
    Teacher: {
      screen: Teacher
    }
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none',
    mode: 'modal'
  }
)

export default createAppContainer(StackNavigator)
  

Home.js

 import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';

export default class Home extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ marginTop: 50, fontSize: 25 }}>Home!</Text>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Teacher')}>
            <Text>Teacher Numbers</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.props.navigation.navigate('Student')}>
            <Text>Student Numbers</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
    
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    width: 300,
    marginTop: 16,
  },
});
  

Student.js

 import React, { useState } from 'react'
import { StyleSheet, View, Button, FlatList } from 'react-native'
import { Text, FAB, List,  IconButton, Colors, TextInput } from 'react-native-paper'
import { useSelector, useDispatch } from 'react-redux'
import { addnumber, deletenumber } from './../store/actions/studentList'    
import Header from '../components/Header'

function StudentNumber({ navigation }) {
  const [studentNumber, setStudentNumber] = useState('')
  const snumbers = useSelector(state => state)
  const dispatch = useDispatch()
  const addNumber = number => dispatch(adbnumber(number))
  const deleteNumber = id => dispatch(deletenumber(id))

  function onSaveNumber() {
    addNumber({studentNumber})
  } 

  function FlatListItemSeparator () {
    return (
      //Item Separator
      <View style={{height: 0.5, width: '100%', backgroundColor: '#C8C8C8'}}/>
    );
  };
  function GetItem(item) {
    //Function for click on an item
    Alert.alert(item);
  }
  return (
    <>
      <View style={styles.container}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <TextInput
          label='Add a Number Here'
          value={studentNumber}
          mode='outlined'
          onChangeText={setStudentNumber}
          style={styles.title}
        />
        {bnumbers.length === 0 ? (
          <View style={styles.titleContainer}>
            <Text style={styles.title}>You do not have any student numbers</Text>
          </View>
        ) : (
          <FlatList
            data={snumbers}
            ItemSeparatorComponent={FlatListItemSeparator}
            renderItem={({ item }) => (
              <List.Item
                title={item.number.studentNumber}
                descriptionNumberOfLines={1}
                titleStyle={styles.listTitle}
                onPress={() => deletestudentNumber(item.bid)}
              />
            )}
            keyExtractor={item => item.id.toString()}
          />
        )}
        <FAB
          style={styles.fab}
          small
          icon='plus'
          label='Add new number'
          onPress={() => onSaveNumber()}
        />
      </View>
    </>
  )
}

  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 10,
    paddingVertical: 20
  },
  titleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  },
  title: {
    fontSize: 20
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 10
  },
  listTitle: {
    fontSize: 20
  }
})

export default Student
  

Teacher.js

 import React, { useState } from 'react'
import { StyleSheet, View, Button, FlatList } from 'react-native'
import { Text, FAB, List,  IconButton, Colors, TextInput } from 'react-native-paper'
import { useSelector, useDispatch } from 'react-redux'
import { addnumber, deletenumber } from './../store/actions/teacherList'

import Header from '../components/Header'

function Teacher({ navigation }) {
  const [teacherNumber, setTeacherNumber] = useState('')
  const numbers = useSelector(state => state)
  const dispatch = useDispatch()
  const addNumber = number => dispatch(addnumber(number))
  const deleteNumber = id => dispatch(deletenumber(id))

  function onSaveNumber() {
    addNumber({ teacherNumber})
  } 

  function FlatListItemSeparator () {
    return (
      //Item Separator
      <View style={{height: 0.5, width: '100%', backgroundColor: '#C8C8C8'}}/>
    );
  };
  function GetItem(item) {
    //Function for click on an item
    Alert.alert(item);
  }
  return (
    <>
      <View style={styles.container}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <TextInput
          label='Add a Number Here'
          value={teacherNumber}
          mode='outlined'
          onChangeText={setTeacherNumber}
          style={styles.title}
        />
        {numbers.length === 0 ? (
          <View style={styles.titleContainer}>
            <Text style={styles.title}>You do not have any teacher numbers</Text>
          </View>
        ) : (
          <FlatList
            data={numbers}
            ItemSeparatorComponent={FlatListItemSeparator}
            renderItem={({ item }) => (
              <List.Item
                title={item.number.teacherNumber}
                descriptionNumberOfLines={1}
                titleStyle={styles.listTitle}
                onPress={() => deleteNumber(item.id)}
              />
            )}
            keyExtractor={item => item.id.toString()}
          />
        )}
        <FAB
          style={styles.fab}
          small
          icon='plus'
          label='Add new number'
          onPress={() => onSaveNumber()}
        />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 10,
    paddingVertical: 20
  },
  titleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  },
  title: {
    fontSize: 20
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 10
  },
  listTitle: {
    fontSize: 20
  }
})

export default Teacher
  

studentStore.js

 import { createStore } from 'redux'
import studentReducer from '../actions/studentList'    
const studentStore = createStore(studentReducer)

export default studentStore
  

teacherStore.js

 import { createStore } from 'redux'
import teacherReducer from '../actions/teacherList'    
const teacherStore = createStore(teacherReducer)

export default teacherStore
  

teacherReducer.js

     import remove from 'lodash.remove'
    
    export const ADD_NUMBER = 'ADD_NUMBER'
    export const DELETE_NUMBER = 'DELETE_NUMBER'
    
    let numberID = 0
    export function addnumber(number) {
      return {
        type: ADD_NUMBER,
        id: numberID  ,
        number
      }
    }
    
    export function deletenumber(id) {
      return {
        type: DELETE_NUMBER,
        payload: id
      }
    }
    
    const initialState = []
    function teacherReducer(state = initialState, action) {
      switch (action.type) {
        case ADD_NUMBER:
          return [
            ...state,
            {
              id: action.id,
              number: action.number
            }
          ]
        case DELETE_NUMBER:
          const deletedNewArray = remove(state, obj => {
            return obj.id != action.payload
          })
          return deletedNewArray
        default:
          return state
      }
    }
    export default teacherReducer
  

studetnReducer.js

     import remove from 'lodash.remove'        
    export const ADD_NUMBER = 'ADD_NUMBER'
    export const DELETE_NUMBER = 'DELETE_NUMBER'
    
    let numberID = 0
    export function addnumber(number) {
      return {
        type: ADD_NUMBER,
        id: numberID  ,
        number
      }
    }
    
    export function deletenumber(id) {
      return {
        type: DELETE_NUMBER,
        payload: id
      }
    }
    
    const initialState = []
    function studentReducer(state = initialState, action) {
      switch (action.type) {
        case ADD_NUMBER:
          return [
            ...state,
            {
              id: action.id,
              number: action.number
            }
          ]
        case DELETE_NUMBER:
          const deletedNewArray = remove(state, obj => {
            return obj.id != action.payload
          })
          return deletedNewArray
        default:
          return state
      }
    }
    export default studentReducer
  

Я пробовал это, но работает только для учителей, а не для обоих..