将图像源传递到另一个导航 - React Native

时间:2016-06-11 07:57:57

标签: reactjs react-native

我正在为学校构建一个简单的应用程序,我有一个关于将图像源从一个导航视图传递到另一个导航视图的问题。

这是代码:

class projekt2 extends React.Component {
  render() {
    return (
      <Navigator initialRoute={{id:'first'}} renderScene={this.navigatorRenderScene}/>
    )
  }

  navigatorRenderScene(route, navigator) {

    _navigator = navigator;

    switch(route.id) {
      case 'first':
        return (<First navigator={navigator} title="first" />);
      case 'second':
        return (<Second navigator={navigator} title="second" />)
      case 'third':
        return (<Third navigator={navigator} title="third" />)
    }

  }
};

class First extends React.Component { // http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/
  navSecond() {
    this.props.navigator.push({
      id: 'second',
    })
  }
  render() { //na sklad se da navigacijske slide, če klikaš gumbek back, se jemlje iz tega sklada
    return (
      <View style={styles.container}> 
          <TouchableHighlight
            onPress={this.navSecond.bind(this)}>
              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}>
              <Image source={require('./slike_google/btn_google_light_normal_hdpi.9.png')}></Image>
                <Text>Sign in with Google</Text>
              </View>
          </TouchableHighlight>
        </View>
    );
  }
}

class Second extends React.Component {

  _handlePress() {
    this.props.navigator.push({
      id: 'third',     
    })
  }

  _dodaj() {
    ToastAndroid.show('Ni se vnesenih kartic',ToastAndroid.LONG);
  }


  render() {
    return (
      <View style={styles.container} id="prva">
        <TouchableHighlight onPress={this._dodaj.bind(this)}>
          <Image source={require( './slike_google/plus_318-80291.png')} style={{width: 30, height: 30}}></Image>
        </TouchableHighlight>
        <View>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
          <TouchableHighlight onPress={this._handlePress.bind(this)}>
            <Image ref="prva" source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')} style={styles.images}></Image>
          </TouchableHighlight>
        </View>
        <Text ref="none" style={{opacity: 0}}>Se ni dodanih kartic</Text>
      </View>
    );
  }
};

class Third extends React.Component {

  render() {
    return (
    <View style={styles.container}>
      <Image source={require('./slike_google/SPAR-plus-kartica-ugodnosti-Card-benefits.jpg')}></Image>
    </View>
    );
  }
}



因此,在第三课中,图像的来源应该是:source = {passed_data.url}。

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

我在https://rnplay.org/apps/b3mJ5A

中给你做了一个例子
Object.getPrototypeOf(arr[0]) === Object.getPrototypeOf(arr[1])

工作正常。

希望这就是你要找的东西。