React-native navigator

来源:互联网 发布:微软人工智能的布局 编辑:程序博客网 时间:2024/06/11 17:25
  • 安装 npm i facebookarchive/react-native-custom-components
  • 引入 import { Navigator } from 'react-native-deprecated-custom-components'
  • 使用
class Boy extends Component<{}> {  constructor(props) {    super(props);    this.state = {      word:''    }  } render() {    console.log('boy')   return (     <View>       <Text>I am a boy</Text>       <Text onPress={()=>{         this.props.navigator.push({           component: Girl,           params: {             word: '一枝玫瑰',             onCallBack: (word) => {               this.setState({                 word: word               })             }           }         })       }}>送女孩一枝玫瑰</Text>       <Text>{this.state.word}</Text>     </View>   ) }};class Girl extends Component<{}> {  render() {    return (      <View>        <Text>I am a Girl</Text>        <Text>我收到了男孩的{this.props.word}</Text>        <Text onPress={()=>{          this.props.onCallBack('巧克力');          this.props.navigator.pop()        }}>送男孩一颗巧克力</Text>      </View>    )  }};export default class App extends Component<{}> {  render() {    return (       <Navigator        initialRoute={{          component: Boy        }}        renderScene={(route, navigator)=> {          let Component = route.component;          console.log(Component)          return <Component navigator={navigator} {...route.params}/>        }}        >      </Navigator>    );  }}
原创粉丝点击