Question

我正在尝试使用React Navigation移动屏幕，问题在于我用来动态渲染一组项目的嵌套返回，并且不允许我使用箭头功能直接导航，所以我必须在函数上实现这一点。我的问题是，我该怎么做？就我的互联网研究而言，只有在出现对话框警报后才能推出新屏幕，我不希望如此。

我附上了代码：

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:'$141,403.22',currency:'BTC: $11.673,50',img:require('./../../img/bitcoin.png')},
{_id:2,name:'Ethereum',desc:'Billetera ETH',price:'$20200,50',currency:'ETH: $863,40',img:require('./../../img/ethereum.png')},
{_id:3,name:'NEO',desc:'Billetera NEO',price:'$40.401',currency:'NEO: $118,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

然后使用导入在您的课程中使用它： -

import {StackNavigator} from 'react-navigation';

导出该类

export default Project = StackNavigator(
{

  xyz: { screen: xyz },
});

之后使用功能导航： -

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

Hope.it会帮助你。感谢名单！

Answer 2

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

np.einsum('ji,jklm', V, imslice)

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

2 个答案: