栈导航器，提供了screen之间相互跳转的方式，每一个新的screen将置于栈顶。
Api定义
createStackNavigator(RouteConfigs, StackNavigatorConfig);
RouteConfigs
第一个参数：路由配置对象是路由名称与路由配置的映射，告诉导航器路由里面有什么。
const NavTest = createStackNavigator({
FirstVC:{
screen:FirstVC,
},
FirstDetailsVC:{
screen:FirstDetailsVC,
}
});StackNavigatorConfig
第二个参数：路由器选项
此处仅简单的使用了navigationOptions。
开始正式表演：
保存页面TextInput输入的内容，首先需要初始化中设置一个变量，来保存输入的内容：
constructor(props) {
super(props);
this.state = {
inputValue:'',
}
}其次是监听TextInput发生变化时更新对应得变量，可以通过onChangeText来监听。
<TextInput placeholder='请输入内容' style={styles.textInput} onChangeText={this.updateInputValue} />由于onChangeText需要一个函数传递进入执行，此处可以使用剪头函数，或者定义一个函数：
updateInputValue = (inputContent) => {
this.setState({
inputValue:inputContent,
});
};通过在函数中调用setState方法更新。
页面间跳转和传值：
栈导航器的跳转是通过路由来进行跳转实现的，故若要实现正确的跳转，需要在导航栈里面提前配置。
具体代码如下：
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<TextInput placeholder='请输入内容' style={styles.textInput} onChangeText={this.updateInputValue} />
<TouchableOpacity style={styles.turnBtn} onPress={()=>{
if (this.state.inputValue.length == 0) {
Alert.alert('提示', '输入内容不能为空');
return;
}
navigate('FirstDetailsVC', {title:'首页详情', inputValue:this.state.inputValue});
}} >
<Text>跳转到下个页面</Text>
</TouchableOpacity>
</View>
);
}
}接收传值并展示：
export default class FirstDetailsVC extends Component {
static navigationOptions = ({navigation}) => ({
headerTitle:navigation.state.params.title,
});
backBtnClicked = ()=> {
this.props.navigation.goBack();
};
render() {
return (
<View style={styles.container}>
<Text style={styles.showText}>{this.props.navigation.state.params.inputValue}</Text>
<TouchableOpacity onPress={this.backBtnClicked} style={styles.backBtn}>
<Text>返回</Text>
</TouchableOpacity>
</View>
);
}
}具体实现效果如下：
