I am trying to push a component when initial component is about to render. I am using the react-native-router-flux module. Unfortunately the Action.checkpass call does not execute while the one in Button tag does (i.e on click).
Any ideas what I could be doing wrong?
class Launch extends React.Component {
render(){
//transfer to checkpass
Actions.checkpass;
return (
<View style={styles.container}>
<Text>Launch page</Text>
<Button onPress={Actions.checkpass}>Go to Register page</Button>
</View>
);
}
};
Call Actions.route('checkpass');
Related
code:
export default class app extends Component {
state={
name:''
}
render(){
return(
<View>
<TextInput onChangeText={this.handle}></TextInput>
<TouchableOpacity
onPress={this.handleSubmit(this.state.name)}>
<Text>go</Text>
</TouchableOpacity>
</View>
)
}
handle=(text)=>{
this.setState({name:text})
}
handleSubmit=(name)=>{
alert(name)
}
}
every time I enter text,The handleSubmit function will use，why？
<TouchableOpacity
onPress={()=>this.handleSubmit(this.state.name)}>
<Text>go</Text>
</TouchableOpacity>
If i write like this，The problem is solved，but why？
The handleSubmit function invoked automatically every time when the render cycle occurs the component so when the text changes occur and that's why the function automatically invokes so you have to put the arrow function to must call when they go button press event occurs.
as you are using () here in the this.handleSubmit(this.state.name).
I have a react native web project. At one point, I would like my View instead of generating a <div> to generate a <label> element.
Is there a way to control this? I am hoping for some sort of htmlTag attribute that gets ignored if this is not compiling for a browser environment.
There was a component prop but it's removed in favor of accessibilityRole (Remove component prop).
You can use accessibilityRole to specify the label tag and even create a custom element using it:
function Label({ text }) {
return <View accessibilityRole="label">{text}</View>
}
and then use it like this:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<Label text="Test input:"/>
<TextInput name="test-input"/>
</View>
</View>
);
}
}
Check this working Expo snack: https://snack.expo.io/#clytras/change-rn-web-div-tag
How about making your own wrapper of View? It could check what environment it is running in, and then if it's in a browser then you can return the label element instead.
You could also use the accessibilityLabel prop on the TextInput, which will add an aria-label prop to the React Native code when it compiles to html for web.
In terms of accessibility, this accomplishes the same effect as a label attribute. See the React Native web docs on accessibility: https://necolas.github.io/react-native-web/docs/accessibility/
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<TextInput accessibilityLabel="test-input" name="test-input"/>
</View>
</View>
);
}
}
i want to render another component in the main component so user won't face a white screen for a second!
i'm using TabNavigator from react-navigation and when i want to switch between tabs, i face a white screen for a second (seems it need a second to render).
i was thinking of rendering the second tab in the first so i can have a better user experience!
P.s. : my components are in separate files!
Main:
export default class AdCalc extends React.Component {
render() {
return (
<View>
<Text>
TEST
</Text>
</View>
);
}
}
and my child:
export default class Child extends React.Component {
render() {
return (
<View>
<Text>
This is child!
</Text>
</View>
);
}
}
thanks in advance!
You can use react-navigation TabNavigatorConfig's lazy prop. Pass lazy={false} so that your views may load at initial start. Then you will not see such a screen.
I am working on a simple calculator app to learn react native. I have a button component that displays the number buttons. I need to pass it a function so that when the button is touched the state of the parent is updated to the new number.
Without the bind(this) it says this.setState is undefined. When I add bind(this) in the constructor all I get is a blank page in my app. My code is listed below.
constructor:
constructor() {
super();
this.state = {
total: 0,
display: 0
};
this._displayUpdate = this._displayUpdate.bind(this);
}
One row of calculator buttons:
<View style={styles.buttonRow}>
<NumButton numText={7} update={this._displayUpdate} />
<NumButton numText={8} update={this._displayUpdate} />
<NumButton numText={9} update={this._displayUpdate} />
<FuncButton funcText={'*'} />
</View>
NumButton Component:
export default class NumButton extends Component {
render() {
return (
<TouchableHighlight style={styles.buttonArea} onPress={this.props.update(this.props.numText)}>
<Text style={styles.buttonText}>{this.props.numText}</Text>
</TouchableHighlight>
)
}
}
Your parent bind is right. The problem is with the onPress of the TouchableHighlight in the NumButton component. You can't add code to execute to it, You should pass a function to it. You can use ES6 arrow function:
export default class NumButton extends Component {
render() {
return (
<TouchableHighlight style={styles.buttonArea}
onPress={()=>{ this.props.update(this.props.numText) }}
>
<Text style={styles.buttonText}>{this.props.numText}</Text>
</TouchableHighlight>
)
}
}
I'm new to React Native and trying ( followed a tutorial ) to move to another screen when a button is clicked, this is the updated code I have and a photo of the error I get when pressing the button.
index.ios.js:
export default class Application extends Component {
constructor(){
super();
}
renderScene(route, navigator){
if(route.name == 'login'){
return <Login navigator={navigator}/>
}else if(route.name == 'home'){
return <Home navigator={navigator}/>
}
}
render() {
return <Navigator
initialRoute={{name: 'login'}}
renderScene={this.renderScene.bind(this)}/>
}
}
LoginForm:
export default class LoginForm extends Component{
constructor(props){
super(props);
this.navigate = this.navigate.bind(this);
}
navigate(routeName){
this.props.navigator.replace({
name: routeName,
Component: Home
});
}
render(){
return(
<View style={mStyle.container}>
<StatusBar barStyle='light-content'/>
<TouchableOpacity>
<Text style={mStyle.btnText}>
LOGIN WITH FACEBOOK
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>this.navigate('home')}>
<Text style={mStyle.noLoginTxt}>
CONTINUE WITHOUT LOGIN
</Text>
</TouchableOpacity>
</View>
);
}
}
I'm trying to move from login screen to home screen when button is clicked.
I get this problem when pressing the button on the emulator:
A couple of problems that you are facing.
1.- The syntax is:
this.props.navigator.{any_method}
Such as:
this.props.navigator.push
this.props.navigator.replace
Not
this.props._navigate.{any_method}
2.- If you have child views make sure you are sending to the childs the Navigator property such as.
<View>
<MyChildComponent navigator={this.props.navigator} />
</View>
3.- Make sure your child view gets the props from the parent on the constructor.
Change
constructor(){
super();
this._navigate = this._navigate.bind(this);
}
To
constructor( props ){
super( props );
// The following line is not required since you are using an arrow function to call this one.
// this._navigate = this._navigate.bind(this);
}
It is because there is a mismatch between property you use in Navigator and in your component
Change
_navigate(name){
this.props._navigate.replace({ //I also tried push, same problem.
name
});
}
to
_navigate(name){
this.props.navigator.replace({ //I also tried push, same problem.
name
});
}