在React Native

时间:2018-01-13 08:02:26

标签: react-native react-navigation

import React, {Component} from 'react'
import { StackNavigator } from 'react-navigation'
import {connect} from 'react-redux'
import {getAllUsers} from '../actions'
import {List, ListItem} from 'react-native-elements'
import { StyleSheet, Text, View, FlatList } from 'react-native'


const UserDetail = () => {
  <View>
   <Text>User Detail</Text>
  </View>
}

const Home = ({ navigation }) => (
  <List>
    {typeof users === 'string' && 
     <FlatList
      data={users}
      />
     }
  </List>
)

const Stack = StackNavigator({
   Home: {
    screen: Home
   },
   UserDetail: {
    screen: UserDetail
   }
})

class MainScreen extends Component {

componentDidMount(){
    this.setState({ users : this.props.getAllUsers() })
}

render() {

    const users = typeof this.props.decks === 'string' 
          ? Object.values(JSON.parse(this.props.users)) : ''

    return(

        <Stack />
    )
  }
 }


function mapStateToProps(users) {
  return {
    users: users,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    getAllUsers: () => dispatch(getAllUsers()),
 }    
}

 export default connect(
  mapStateToProps,
  mapDispatchToProps
 )(MainScreen)

我有两个问题:

1)我想将用户道具从MainScreen组件传递到Home组件,稍后传递给UserDetail组件。但除了ScreenProps之外,我在React Navigation文档上看不到任何示例。

2)如果我去UserDetail,让我们说它将是一个单独的组件。让我们说它会调用另一个组件。例如,它如何回到Home

我也在这里使用Redux,并且有些人建议在Redux中使用它,但我仍然无法使其工作。我对React Native或React相当新,但到目前为止我还没有找到关于上述问题的明确答案。

0 个答案:

没有答案