从功能反应本机导航到屏幕

Question

我正在尝试使用 React Navigation 在屏幕中移动，问题出在我用来动态呈现一组项目的嵌套 return 并且不允许我使用箭头函数直接导航，所以我必须在一个函数上实现它。我的问题是，我该怎么做？就我的互联网研究而言，您只能在出现对话框警报后推送新屏幕，我不希望那样。

我附上代码：

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image
} from 'react-native';
import Pie from 'react-native-pie';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import NaviBarView from './../Commons/NaviBar'
import actions from '../../Redux/actions'

class Main extends Component {
constructor(props){
    super(props);
    this.state={
        cargando:true,
        cryptoCurrencyValues:{}
    }

    this.onNextPress = this.onNextPress.bind(this);
    this.renderItems = this.renderItems.bind(this);
}

static getDerivedStateFromProps(nextProps,prevState){
    console.warn('Positivo', Object.keys(nextProps.cryptoCurrencyValues).length)
    if (Object.keys(nextProps.cryptoCurrencyValues).length !== 0){

    }else{
        console.warn('Negativo')
    }
    return null;
}

onNextPress(){

    **//HERE I WANT TO CALL NAVIGATE TO MOVE TO ANOTHER SCREEN**

}

componentDidMount(){
    console.warn('esto una vez')
    this.props.actions.getCryptoValues();
    this.setState({cargando:true})
}

renderItems(){
    var self = this;
    return listData.map(function(cryptoValue,i){
    return(
                <View style={styles.itemContainer} key={i}>
                    <View style={{alignSelf:'center',backgroundColor:'transparent', marginLeft:10}}>
                        <Image source={cryptoValue.img} style={{width:width*0.095, height:height*0.050}} resizeMode={'stretch'}/>
                    </View>
                    <View style={{marginLeft:10}}>
                        <View style={{alignSelf:'flex-start',marginTop:15}}>
                            <Text style={{color:'#ffffff',fontSize:18,fontWeight: 'bold'}}>{cryptoValue.name}</Text>
                        </View>
                        <View style={{alignSelf:'flex-start',marginBottom:10}}>
                            <Text style={{color:'#6e6e6e',fontSize:18}}>{cryptoValue.desc}</Text>
                        </View>
                    </View>
                    <View style={{marginLeft:40}}>
                        <View style={{alignSelf:'flex-start',marginTop:15}}>
                            <Text style={{color:'#ffffff',fontSize:18}}>{cryptoValue.price}</Text>
                        </View>
                        <View style={{alignSelf:'flex-start',marginBottom:10}}>
                            <Text style={{color:'#6e6e6e',fontSize:18}}>{cryptoValue.currency}</Text>
                        </View>
                    </View>
                    <View style={{alignSelf:'center',backgroundColor:'transparent', marginLeft:50}}>
                        <TouchableOpacity onPress={() => self.onNextPress()} style={{alignSelf:'center',backgroundColor:'transparent'}}>
                            <Image source={require('./../../img/next.png')} style={{width:width*0.035, height:height*0.032}} resizeMode={'stretch'}/>
                        </TouchableOpacity>
                    </View> 
                </View>         
                );
            });
}

render(){
    return(
        <View style={styles.container}>
            <View>
                <NaviBarView/>
            </View>
            <View style={styles.cardContainer}>
                <View style={{marginTop:10,flexDirection: 'row',marginTop:10,marginLeft:10,alignItems:'stretch'}}>
                        <Image source={require('./../../img/pie-chart.png')} resizeMode={'stretch'} style={{width:width*0.095, height:height*0.055}}/>
                        <Text style={{fontSize:20,color:'#ffffff',fontWeight:'bold',marginLeft:15,alignSelf:'center'}}>STATUS</Text>
                        <TouchableOpacity style={{marginLeft:230,alignSelf:'center'}}>
                            <Image source={require('./../../img/reload.png')} resizeMode={'stretch'} style={{width:width*0.065, height:height*0.035}}/>
                        </TouchableOpacity>
                </View>
                    <View style={{alignSelf:'flex-start',marginTop:50}}>
                        <Pie
                          radius={100}
                          innerRadius={97}
                          series={[10, 20, 30, 40]}
                          colors={['#f00', '#0f0', '#00f', '#ff0']} 
                        />
                    </View>
            </View>

            {this.renderItems()}

        </View>

        );
    }
}

const listData = [
{_id:1,name:'Bitcoin',desc:'Billetera BTC',price:'1,403.22',currency:'BTC: .673,50',img:require('./../../img/bitcoin.png')},
{_id:2,name:'Ethereum',desc:'Billetera ETH',price:'200,50',currency:'ETH: 3,40',img:require('./../../img/ethereum.png')},
{_id:3,name:'NEO',desc:'Billetera NEO',price:'.401',currency:'NEO: 8,02',img:require('./../../img/neo.png')},
];

const styles = new StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: '#0d0d0d',
        flexDirection: 'column',
        position:'relative',
    },
    cardContainer:{
        backgroundColor:'#1a1a1a',
        marginTop: 7,
        marginBottom:7,
        marginLeft:7,
        marginRight:7,
        height:height*0.50,
        width:width,
        justifyContent: 'flex-start'
    },
    itemContainer:{
        flexDirection: 'row',
        backgroundColor:'#1a1a1a',
        width:width,
        height:height*0.115,
        marginLeft:7,
        marginRight:7,
        marginBottom:7,
        justifyContent: 'flex-start'
    },
})

function mapStateToProps (state,props) {
    return {cryptoCurrencyValues: state.cryptocurrencyValues,
    }
}

function mapDispatchToProps (dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);

Answer 1

您可以在此处使用 Stack Navigator，它非常容易从一个屏幕导航到另一个屏幕，而且在功能上也很... 第一的。安装库：-

npm install --save react-navigation

然后通过导入在你的 class 中使用它:-

import {StackNavigator} from 'react-navigation';

导出 class

export default Project = StackNavigator(
{

  xyz: { screen: xyz },
});

之后使用函数导航：-

onNextPress=()=>
{
  this.props.navigation.navigate('xyz');
}

Hope.it 会帮助你。谢谢！

Answer 2

我在定义我的 RootStack 时没有传递导航道具：

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

import createStore from './../../Redux/store';
import {StackNavigator} from 'react-navigation';
import { Provider } from 'react-redux';

import MainView from '../Main/Main';
import MainSecondLvlView from '../Main/MainSecondLvl';
import BalanceView from './../Charts/BalanceView'
import MenuView from './Menu'

const store = createStore();

const RootStack = StackNavigator({
    Main: { screen: MainView },
    MainSecondLvl: { screen: MainSecondLvlView},
    Menu:{ screen: MenuView }
},
{
    initialRouteName: 'Main',
    headerMode: 'none', 
});

export default class App extends Component {

    render(){
        return(
            <Provider store={store}>
                <RootStack navigation={this.props.navigation}/>
            </Provider>
            );
    }
}

从功能反应本机导航到屏幕

react native navigate to screen from function

android

reactjs

react-native

react-navigation