Passprops相当于浏览器？浏览器、Passprops

2023-09-07 14:10:38 作者：双眼抑万郁

我想从NavigatorIOS转换到浏览器似乎无法弄清楚如何使passprops工作。我想两个变量，LRA和邮件传递到下一个场景，但我不断收到未定义。我很新的这让我很抱歉，如果这是一个简单的问题。这是我的code到目前为止，随时给我，你看错了，任何其他提示！

DataEntry.js

 类DataEntry扩展组件{
    构造函数（道具）{
      超（道具）;
        this.state = {
          EmailString的：default@gmail.com，
          isLoading：假的，
          信息： ''，
        mailerror：假的，
        lraerror：假的
        };
    }

  onEmailTextChanged（事件）{
    this.setState（{EmailString的：event.nativeEvent.text}）;
    如果（！validateEmail（this.state.emailString））{
      this.emailError =请输入一个有效的电子邮件
      this.setState（{错误：真}）
    }
    其他{
      this.emailError =
      this.setState（{错误：错误}）
    }
    }

  onLRATextChanged（事件）{
    this.setState（{LRAString：event.nativeEvent.text}）;
    如果（！isValidID（this.state.LRAString））{
      this.LRAError =上帝抵抗军的有效ID为4-10个字母数字字符
      this.setState（{错误：真}）
    }
    其他{
      this.LRAError =
      this.setState（{错误：错误}）
    }
  }

  gotoNext（）{
    VAR emailtext = this.state.emailString
    VAR LRAtext = this.state.LRAString
    执行console.log（emailtext）
    this.props.navigator.push（{
        ID：PasswordView，
        名称：生成的密码，
        电子邮件：emailtext，
        LRA：LRAtext
    }）;
  }

  renderScene（路线，导航器）{
    VAR电子邮件= this.state.emailString
    VAR LRA = this.state.LRAString
    返回 （
      ＆LT;景观风格= {styles.container}＆GT;
            ＆LT;文本样式= {styles.description}＆GT;
                请输入电子邮件地址和LRA
            ＆LT; /文字＆GT;

            ＆LT;景观风格= {styles.flowRight}＆GT;
              ＆LT;的TextInput
                风格= {} styles.searchInput
                值= {this.state.emailString}
                的onChange = {this.onEmailTextChanged.bind（这）}
                占位符='请输入电子邮件地址/＆GT;
            ＆LT; /视图＆gt;

            ＆LT;文本样式= {styles.error}＆GT;
              {this.emailError}
            ＆LT; /文字＆GT;

            ＆LT;景观风格= {styles.flowRight}＆GT;
              ＆LT;的TextInput
                风格= {} styles.searchInput
                值= {this.state.LRAString}
                的onChange = {this.onLRATextChanged.bind（这）}
                占位符='请输入LRA ID/＆GT;
            ＆LT; /视图＆gt;

            ＆LT;文本样式= {styles.error}＆GT;
              {this.LRAError}
            ＆LT; /文字＆GT;


            ＆LT; TouchableHighlight风格= {} styles.button
                underlayColor ='＃99d9f4
                在preSS = {this.gotoNext.bind（这）}＆GT;
               ＆LT;文本样式= {styles.buttonText}＆GT;找回密码＆LT; /文字＆GT;
            ＆LT; / TouchableHighlight＆GT;
        ＆LT;文本样式= {styles.description}＆GT; {this.state.message}＆LT; /文字＆GT;
      ＆LT; /视图＆gt;
    ）;
  }
渲染（）{
        返回 （
          ＆LT;导航
          renderScene = {this.renderScene.bind（这）}
          导航= {this.props.navigator}
          导航栏= {
            ＆LT; Navigator.NavigationBar风格= {{的backgroundColor：'＃48BBEC，alignItems：'中心'}}
                routeMapper = {NavigationBarRouteMapper} /＆GT;
          } /＆GT;
        ）;
      }
}

VAR NavigationBarRouteMapper = {
  LeftButton（路线，导航仪，指数，navState）{
    返回null;
  }，
  RightButton（路线，导航仪，指数，navState）{
    返回null;
  }，
  标题（路线，导航仪，指数，navState）{
    返回 （
      ＆LT; TouchableOpacity风格= {{柔性：1，justifyContent：'中心'}}＆GT;
        ＆LT;文本样式= {{颜色：'白'，保证金：10，字体：16}}＆GT;
          数据输入
        ＆LT; /文字＆GT;
      ＆LT; / TouchableOpacity＆GT;
    ）;
  }
};


module.exports = DataEntry;

解决方案

您可能需要您的浏览器分离到它自己的组件，那么你就可以将你需要的导航器所需要的属性（在这种情况下，.. .route.passProps US $ p $垫运营商作为属性设置了passProps使用的导航器）。

我已经设置了项目的code 这里的 https://rnplay.org/apps/V_EhdA 。

下面是code我用得到它的工作。

 使用严格的;

VAR阵营=需要（'反应母语'）;
VAR {
  鸭pregistry，
  样式表，
  文本，
  视图，
  TouchableOpacity，
  的TextInput，
  航海家，
  TouchableHighlight
} =动作;

功能isValidID（串）{
    返回true
}

VAR两个= React.createClass（{
    渲染（）{
    返回（
        ＆LT;景观风格= {{marginTop：100}}＆GT;
          ＆LT;文本样式= {{字体：20}}＆GT;你好从第二组分LT; /文字＆GT;
          ＆LT;文字＆GT; ID：{this.props.id}＆LT; /文字＆GT;
          ＆LT;文字＆GT;名称：{this.props.name}＆LT; /文字＆GT;
        ＆LT; /视图＆gt;
    ）
  }
}）

VAR主要= React.createClass（{

    getInitialState的（）{
        返回 {
          EmailString的：default@gmail.com，
          isLoading：假的，
          信息： ''，
          mailerror：假的，
          lraerror：假的
      }
    }，

  onEmailTextChanged（事件）{
    this.setState（{EmailString的：event.nativeEvent.text}）;
    如果（！validateEmail（this.state.emailString））{
      this.emailError =请输入一个有效的电子邮件
      this.setState（{错误：真}）
    }
    其他{
        this.emailError =
        this.setState（{错误：错误}）
      }
    }，

  onLRATextChanged（事件）{
    this.setState（{LRAString：event.nativeEvent.text}）;
    如果（！isValidID（this.state.LRAString））{
      this.LRAError =上帝抵抗军的有效ID为4-10个字母数字字符
      this.setState（{错误：真}）
    }
    其他{
      this.LRAError =
      this.setState（{错误：错误}）
    }
  }，

  gotoNext（）{
    VAR emailtext = this.state.emailString
    VAR LRAtext = this.state.LRAString
    this.props.navigator.push（{
        passProps：{
            ID：PasswordView，
            名称：生成的密码，
            电子邮件：this.state.emailstring，
            LRA：LRAtext，
        }，
        成分：二
    }）;
  }，

    渲染（）{
      VAR电子邮件= this.state.emailString
      VAR LRA = this.state.LRAString
      返回 （
        ＆LT;景观风格= {styles.container}＆GT;
            ＆LT;文本样式= {styles.description}＆GT;
                请输入电子邮件地址和LRA
            ＆LT; /文字＆GT;

            ＆LT;视图＆gt;
              ＆LT;的TextInput
                风格= {{高度：40}}
                值= {this.state.emailString}
                的onChange = {this.onEmailTextChanged.bind（这）}
                占位符='请输入电子邮件地址/＆GT;
            ＆LT; /视图＆gt;

            ＆LT;文字＆GT;
              {this.emailError}
            ＆LT; /文字＆GT;

            ＆LT;视图＆gt;
              ＆LT;的TextInput
                风格= {{高度：40}}
                值= {this.state.LRAString}
                的onChange = {this.onLRATextChanged.bind（这）}
                占位符='请输入LRA ID/＆GT;
            ＆LT; /视图＆gt;

            ＆LT;文字＆GT;
              {this.LRAError}
            ＆LT; /文字＆GT;

            ＆LT; TouchableHighlight风格= {{填充：30}}
                underlayColor ='＃99d9f4
                在preSS = {（）=＆GT; this.gotoNext（）}＆GT;
               ＆LT;文字＆GT;找回密码＆LT; /文字＆GT;
            ＆LT; / TouchableHighlight＆GT;

        ＆LT;文字＆GT; {this.state.message}＆LT; /文字＆GT;
      ＆LT; /视图＆gt;
    ）;
}
}）

一流的DataEntry扩展React.Component {
    构造函数（道具）{
      超（道具）;
    }
        渲染（）{
        返回 （
          ＆LT;导航
          configureScene = {（）=＆GT; {
                      返回Navigator.SceneConfigs.FloatFromRight;
                  }}
          initialRoute = {{名字：组件名，成分：主，指数：0}}
          renderScene = {（路线，导航仪）=＆GT; {
            如果（route.component）{
                          返回React.createElement（route.component，{... this.props，... route.passProps，导航，路线}）;
                      }
        }}

          导航栏= {
            ＆LT; Navigator.NavigationBar
            风格= {{的backgroundColor：'＃48BBEC，alignItems：'中心'}}
                routeMapper = {NavigationBarRouteMapper} /＆GT;
          } /＆GT;
        ）;
      }
}

VAR NavigationBarRouteMapper = {
  LeftButton（路线，导航仪，指数，navState）{
    如果（指数大于0）{
      返回 （
      ＆LT; TouchableHighlight风格= {{marginTop：10}}在preSS = {（）=＆GT; {
            如果（指数大于0）{
              navigator.pop（）;
            }
        }}＆GT;
       ＆LT;文字＆GT;返回＆LT; /文字＆GT;
     ＆LT; / TouchableHighlight＆GT;
 ）} 其他 {
 返回NULL}
 }，
  RightButton（路线，导航仪，指数，navState）{
    返回null;
  }，
  标题（路线，导航仪，指数，navState）{
    返回 （
      ＆LT; TouchableOpacity风格= {{柔性：1，justifyContent：'中心'}}＆GT;
        ＆LT;文本样式= {{颜色：'白'，保证金：10，字体：16}}＆GT;
          数据输入
        ＆LT; /文字＆GT;
      ＆LT; / TouchableOpacity＆GT;
    ）;
  }
};

VAR风格= StyleSheet.create（{
    集装箱：{弯曲：1}，
    说明：{弯曲：1}
}）

鸭pregistry.registerComponent（'DataEntry'，（）=＆GT; DataEntry）;

取消浏览器密码软件 IE Password Remover V1.0绿色版清除浏览器密码下载

I am trying to convert from NavigatorIOS to Navigator and can't seem to figure out how to make passprops work. I'm trying to pass two variables, LRA and email to the next scene, but I keep getting undefined. I'm very new to this so I'm sorry if this is an easy question. Here is my code so far, feel free to give me any other tips you see wrong with it!

DataEntry.js

  class DataEntry extends Component {
    constructor(props) {
      super(props);
        this.state = {
          emailString: 'default@gmail.com',
          isLoading: false,
          message: '',
        mailerror: false,
        lraerror: false
        };
    }

  onEmailTextChanged(event) {
    this.setState({ emailString: event.nativeEvent.text });
    if (!validateEmail(this.state.emailString)){
      this.emailError = "Please enter a valid email"
      this.setState({error: true})
    }
    else{
      this.emailError = ""
      this.setState({error: false})
    }
    }

  onLRATextChanged(event) {
    this.setState({ LRAString: event.nativeEvent.text });
    if (!isValidID(this.state.LRAString)){
      this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
      this.setState({error: true})
    }
    else{
      this.LRAError = ""
      this.setState({error: false})
    }
  }

  gotoNext() {  
    var emailtext = this.state.emailString
    var LRAtext = this.state.LRAString
    console.log(emailtext)
    this.props.navigator.push({
        id: 'PasswordView',
        name: 'Generated Password',
        email: emailtext,
        LRA: LRAtext
    });
  }

  renderScene(route, navigator) {
    var email = this.state.emailString
    var LRA = this.state.LRAString
    return (    
      <View style={styles.container}>
            <Text style={styles.description}>
                Please enter the email and LRA
            </Text>

            <View style={styles.flowRight}>
              <TextInput
                style={styles.searchInput}
                value={this.state.emailString}
                onChange={this.onEmailTextChanged.bind(this)}
                placeholder='Enter Email'/>
            </View>

            <Text style={styles.error}>
              {this.emailError}
            </Text>

            <View style={styles.flowRight}>
              <TextInput
                style={styles.searchInput}
                value={this.state.LRAString}
                onChange={this.onLRATextChanged.bind(this)}
                placeholder='Enter LRA ID'/>
            </View>

            <Text style={styles.error}>
              {this.LRAError}
            </Text>


            <TouchableHighlight style={styles.button}
                underlayColor='#99d9f4'
                onPress={this.gotoNext.bind(this)}>
               <Text style={styles.buttonText}>Retrieve Password</Text>
            </TouchableHighlight>
        <Text style={styles.description}>{this.state.message}</Text>
      </View>
    );
  }
render() {
        return (
          <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
        );
      }  
}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    return null;
  },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
        <Text style={{color: 'white', margin: 10, fontSize: 16}}>
          Data Entry
        </Text>
      </TouchableOpacity>
    );
  }
};


module.exports = DataEntry;

解决方案

You probably need to separate your Navigator into it's own component, then you can assign the properties you need on the navigator as needed (in this case, the ...route.passProps spread operator being the property setting up passProps for use by the navigator).

I've set up the project with your code here https://rnplay.org/apps/V_EhdA.

Below is the code I used to get it working.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Navigator,
  TouchableHighlight
} = React;

function isValidID(string) {
    return true
}

var Two = React.createClass({
    render(){
    return(
        <View style={{marginTop:100}}>
          <Text style={{fontSize:20}}>Hello From second component</Text>
          <Text>id: {this.props.id}</Text>
          <Text>name: {this.props.name}</Text>
        </View>
    )
  } 
})

var Main = React.createClass ({

    getInitialState() {
        return {
          emailString: 'default@gmail.com',
          isLoading: false,
          message: '',
          mailerror: false,
          lraerror: false
      }
    }, 

  onEmailTextChanged(event) {
    this.setState({ emailString: event.nativeEvent.text });
    if (!validateEmail(this.state.emailString)){
      this.emailError = "Please enter a valid email"
      this.setState({error: true})
    }
    else{
        this.emailError = ""
        this.setState({error: false})
      }
    },

  onLRATextChanged(event) {
    this.setState({ LRAString: event.nativeEvent.text });
    if (!isValidID(this.state.LRAString)){
      this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
      this.setState({error: true})
    }
    else{
      this.LRAError = ""
      this.setState({error: false})
    }
  },

  gotoNext() {  
    var emailtext = this.state.emailString
    var LRAtext = this.state.LRAString
    this.props.navigator.push({
        passProps: {
            id: 'PasswordView',
            name: 'Generated Password',
            email: this.state.emailstring,
            LRA: LRAtext,
        },
        component: Two
    });
  },

    render() {
      var email = this.state.emailString
      var LRA = this.state.LRAString
      return (
        <View style={styles.container}>
            <Text style={styles.description}>
                Please enter the email and LRA
            </Text>

            <View >
              <TextInput
                style={{height:40}}
                value={this.state.emailString}
                onChange={this.onEmailTextChanged.bind(this)}
                placeholder='Enter Email'/>
            </View>

            <Text >
              {this.emailError}
            </Text>

            <View >
              <TextInput
                style={{height:40}}
                value={this.state.LRAString}
                onChange={this.onLRATextChanged.bind(this)}
                placeholder='Enter LRA ID'/>
            </View>

            <Text>
              {this.LRAError}
            </Text>

            <TouchableHighlight style={{padding:30}}
                underlayColor='#99d9f4'
                onPress={ () => this.gotoNext() }>
               <Text>Retrieve Password</Text>
            </TouchableHighlight>

        <Text >{this.state.message}</Text>
      </View>
    );
}
})

class DataEntry extends React.Component {
    constructor(props) {
      super(props);
    } 
        render() {
        return (
          <Navigator
          configureScene={() => {
                      return Navigator.SceneConfigs.FloatFromRight;
                  }}
          initialRoute={{name: 'ComponentName', component: Main, index: 0}}
          renderScene={(route, navigator) =>    {
            if (route.component) {
                          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
                      }
        }}

          navigationBar={
            <Navigator.NavigationBar 
            style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
        );
      }  
}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
      <TouchableHighlight  style={{marginTop: 10}} onPress={() => {
            if (index > 0) {
              navigator.pop();
            } 
        }}>
       <Text>Back</Text>
     </TouchableHighlight>
 )} else {
 return null}
 },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
        <Text style={{color: 'white', margin: 10, fontSize: 16}}>
          Data Entry
        </Text>
      </TouchableOpacity>
    );
  }
};

var styles = StyleSheet.create({
    container: {flex:1},
    description: {flex:1}
})

AppRegistry.registerComponent('DataEntry', () => DataEntry);

上一篇：如何建立一个适当的凌空监听器的跨级排球方法调用监听器、建立一个、排球、适当

下一篇：swagger 在线编辑器可以通过地址栏输入一个 YAML url 作为输入吗?在线、可以通过、编辑器、地址栏

相关推荐

精彩图集

精彩推荐

图片推荐